import type { ReactElement } from "react";

import { MIcon } from "@components/common/MIcon";
import { Tooltip } from "@components/common/Tooltip";
import { twMerge } from "@utils/tailwindMerge";

const AddOnContent = ({
  iconName,
  icon,
  label,
  actionItem,
  active,
}: {
  icon?: ReactElement;
  iconName: string;
  label: string;
  actionItem: ReactElement;
  active: boolean;
}) => (
  <>
    <span className="bn-size-5 bn-hidden sm:bn-block">
      {icon || (
        <MIcon
          name={iconName}
          classNames={`bn-text-[20px] hidden md:block ${
            active ? "bn-text-accent-1" : "bn-text-secondary"
          }`}
        />
      )}
    </span>
    <span>{label}</span>
    {actionItem}
  </>
);

export const AddOnItem = ({
  label,
  className: classNameProp,
  icon,
  iconName,
  actionItem,
  active,
  isCustomAddress,
  onClick,
  disabled = false,
  mandatory = false,
  disabledMsg,
}: {
  label: string;
  className?: string;
  icon?: ReactElement;
  iconName: string;
  actionItem: ReactElement;
  active: boolean;
  isCustomAddress?: boolean;
  onClick?: () => void;
  disabled?: boolean;
  mandatory?: boolean;
  disabledMsg?: string;
}) => {
  // biome-ignore format:
  const className = twMerge(
    "bn-flex bn-items-center bn-space-x-1 bn-p-1 bn-text-primary bn-text-sm bn-font-medium bn-rounded-full bn-h-7",
    disabled ? "bn-opacity-25" : "bn-opacity-100",
    mandatory && !active ? "bn-bg-[#36211A]" : "bn-bg-layer-3",
    isCustomAddress && "!bn-bg-accent-1",
    classNameProp
  );

  if (disabled && disabledMsg) {
    return (
      <Tooltip content={disabledMsg}>
        <div className={className}>
          <AddOnContent
            icon={icon}
            iconName={iconName}
            label={label}
            actionItem={actionItem}
            active={active}
          />
        </div>
      </Tooltip>
    );
  }

  if (onClick) {
    return (
      <button className={className} onClick={onClick} type="button">
        <AddOnContent
          icon={icon}
          iconName={iconName}
          label={label}
          actionItem={actionItem}
          active={active}
        />
      </button>
    );
  }

  return (
    <div className={className}>
      <AddOnContent
        icon={icon}
        iconName={iconName}
        label={label}
        actionItem={actionItem}
        active={active}
      />
    </div>
  );
};
