import { setToast, TOAST_TYPE } from "@buzzwaretech/propel/toast";
import { Tooltip } from "@buzzwaretech/propel/tooltip";
import type {
    TIdentifierTextProps,
    TIdentifierTextVariant,
    TIssueIdentifierSize,
} from "@buzzwaretech/types";
import { cn } from "@buzzwaretech/utils";

const SIZE_MAP: Record<TIssueIdentifierSize, string> = {
  xs: "text-caption-sm-regular",
  sm: "text-caption-sm-medium",
  md: "text-caption-md-medium",
  lg: "text-caption-lg-medium",
};

const VARIANT_MAP: Record<TIdentifierTextVariant, string> = {
  default: "text-tertiary",
  secondary: "text-secondary",
  tertiary: "text-tertiary",
  primary: "text-primary",
  "primary-subtle": "text-primary/80",
  success: "text-success-primary",
};

export function IdentifierText(props: TIdentifierTextProps) {
  const {
    identifier,
    enableClickToCopyIdentifier = false,
    size = "lg",
    variant = "default",
  } = props;
  // handlers
  const handleCopyIssueIdentifier = () => {
    if (enableClickToCopyIdentifier) {
      navigator.clipboard
        .writeText(identifier)
        .then(() => {
          setToast({
            type: TOAST_TYPE.SUCCESS,
            title: "Work item ID copied to clipboard",
          });
          return;
        })
        .catch(() => {
          console.error("Failed to copy work item ID");
        });
    }
  };

  const textSizeClassName = SIZE_MAP[size];
  const variantClassName = VARIANT_MAP[variant];

  return (
    <Tooltip
      tooltipContent="Click to copy"
      disabled={!enableClickToCopyIdentifier}
      position="top"
    >
      <button
        type="button"
        className={cn(
          "text-12 font-medium whitespace-nowrap text-tertiary",
          textSizeClassName,
          variantClassName,
          {
            "cursor-pointer": enableClickToCopyIdentifier,
          },
        )}
        onClick={handleCopyIssueIdentifier}
        disabled={!enableClickToCopyIdentifier}
      >
        {identifier}
      </button>
    </Tooltip>
  );
}