import { CustomizableHeaderProps, TooltipProps } from "@app/models/components";
import React, { CSSProperties } from "react";
import Avatar from "../avatar/Avatar";
import InputField from "../input-field/InputField";
import Button from "../button/Button";
import "./customizable-header-styles.scss";
import {
  AddIcon,
  EditIcon,
  HelpIcon,
  RemoveIcon,
  TrashCanIcon,
} from "@app/assets/images/icons";
import IconButton from "../icon-button/IconButton";
import Tooltip from "../Tooltip/Tooltip";

import InfoBadge from "../InfoBadge/InfoBadge";

const CustomizableHeader: React.FC<CustomizableHeaderProps> = ({
  fieldInfo,
  avatar,
  inputField,
  actionButton,
  title,
  isEditable,
  onUpdateImage,
  onRemoveImage,
  classes,
  headerLink,
  onRemoveSocialIcon,
  socialIcons = [],
  onSocialIconClick,
}) => {
  const rootClasses = [
    "customizableHeader-root",
    ...(classes || []),
    isEditable && "customizableHeader-editable",
  ]
    .filter(Boolean)
    .join(" ");

  const tooltipProps: TooltipProps = { text: fieldInfo?.description };

  const tagStyle: CSSProperties = {
    backgroundColor: "transparent",
    color: "#868686",
  };

  const showLabel = isEditable && fieldInfo?.label;
  const showDescription = isEditable && fieldInfo?.description;
  const showTitle = title && !isEditable;
  const showInputField = inputField && isEditable;

  const handleRemoveSocialIcon = (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
    index: number
  ) => {
    event.stopPropagation();
    onRemoveSocialIcon?.(index);
  };

  return (
    <div className={rootClasses}>
      {showLabel && (
        <div className="customizableHeader-labelWrapper">
          <label htmlFor={inputField?.name ?? ""}>{fieldInfo.label}</label>
          {showDescription && (
            <InfoBadge
              icon={HelpIcon}
              tooltip={tooltipProps}
              style={tagStyle}
            />
          )}
        </div>
      )}

      <div className="customizableHeader-content">
        <div className="customizableHeader-details">
          <div className="customizableHeader-avatar-title-wrapper">
            {" "}
            <div className="customizableHeader-avatar">
              {!isEditable && headerLink ? (
                <a href={headerLink} target="_blank">
                  <Avatar {...avatar} />
                </a>
              ) : (
                <Avatar {...avatar} />
              )}

              {isEditable && (
                <div className="customizableHeader-avatarOverlay">
                  <Tooltip
                    text={`${avatar?.src ? "Update Image" : "Add Image"}`}
                  >
                    <IconButton
                      icon={EditIcon}
                      size="md"
                      color="primary"
                      onClickHandler={onUpdateImage}
                    />
                  </Tooltip>
                  <Tooltip text="Remove Image">
                    <IconButton
                      icon={TrashCanIcon}
                      size="md"
                      color="primary"
                      onClickHandler={onRemoveImage}
                      disabled={!avatar?.src}
                    />
                  </Tooltip>
                </div>
              )}
            </div>
            {showTitle && (
              <a
                href={headerLink ?? "#"}
                target="_blank"
                className="customizableHeader-anchor"
              >
                <h3 className="customizableHeader-title">{title}</h3>{" "}
              </a>
            )}
            {showInputField && (
              <div className="customizableHeader-inputWrapper">
                <InputField
                  containerID="customizableHeader-input"
                  {...inputField}
                />
              </div>
            )}
          </div>

          <div className="customizableHeader-socialIconsWrapper">
            {socialIcons?.map((socialIconProps, index) => (
              <div
                key={socialIconProps.id}
                className="customizableHeader-socialIcons"
              >
                <a
                  href={socialIconProps.action_url}
                  target="_blank"
                  className="customizableHeader-socialIconsAnchor"
                >
                  <img
                    src={socialIconProps.image_url}
                    className="customizableHeader-socialIconsImage"
                  />
                </a>
                {isEditable && (
                  <div
                    className="customizableHeader-socialIconsOverlay"
                    onClick={() => {
                      onSocialIconClick?.(index);
                    }}
                  >
                    <Tooltip text="Remove Icon">
                      <IconButton
                        icon={RemoveIcon}
                        size="sm"
                        onClickHandler={(event) =>
                          handleRemoveSocialIcon(event, index)
                        }
                        id="customizableHeader-RemoveIcon"
                      />
                    </Tooltip>
                  </div>
                )}
              </div>
            ))}
            {isEditable && (
              <Tooltip text="Add Icon">
                <Button
                  shape="circular"
                  icon={AddIcon}
                  size="md"
                  onClickHandler={() => {
                    onSocialIconClick?.(-1);
                  }}
                  id="customizableHeader-addIcon"
                  variant="secondary"
                />
              </Tooltip>
            )}
          </div>

          {actionButton?.text && actionButton?.onClickHandler && (
            <div className="customizableHeader-buttonWrapper">
              <Tooltip
                text={`${isEditable ? "Click to customize" : ""}`}
                gap={10}
              >
                <Button
                  id="customizableHeader-button"
                  shape="rounded"
                  {...actionButton}
                />
              </Tooltip>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default CustomizableHeader;