import { CopyOutlined } from "@ant-design/icons";
import { message, Tooltip } from "antd";
import { useTranslate } from "@refinedev/core";
import "./spoolIcon.css";

interface Props {
  color: string | { colors: string[]; vertical: boolean };
  size?: "small" | "large";
  no_margin?: boolean;
  showHex?: boolean;
}

export default function SpoolIcon(props: Readonly<Props>) {
  const t = useTranslate();
  let dirClass = "vertical";
  let cols: string[] = [];
  const size = props.size ? props.size : "small";
  const no_margin = props.no_margin ? "no-margin" : "";

  if (typeof props.color === "string") {
    cols = [props.color];
  } else {
    dirClass = props.color.vertical ? "vertical" : "horizontal";
    cols = props.color.colors;
  }

  // Normalize hex codes (remove # if present, uppercase)
  const normalizedCols = cols.map((col) => col.replace("#", "").toUpperCase());
  const hexDisplay = normalizedCols.length === 1 ? `#${normalizedCols[0]}` : normalizedCols.map((c) => `#${c}`).join(", ");

  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(hexDisplay);
      message.success(t("color.copied", { color: hexDisplay }));
    } catch {
      message.error(t("color.copy_failed"));
    }
  };

  const swatchContent = (
    <div className={"spool-icon " + dirClass + " " + size + " " + no_margin}>
      {normalizedCols.map((col) => (
        <div
          key={col}
          style={{
            backgroundColor: "#" + col,
          }}
        ></div>
      ))}
    </div>
  );

  if (props.showHex) {
    return (
      <Tooltip title={`${t("color.click_to_copy")}: ${hexDisplay}`}>
        <div
          className="spool-icon-with-hex"
          onClick={copyToClipboard}
          style={{ cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 8 }}
        >
          {swatchContent}
          <span className="hex-code" style={{ fontFamily: "monospace", fontSize: "0.85em", opacity: 0.8 }}>
            {hexDisplay}
            <CopyOutlined style={{ marginLeft: 4, fontSize: "0.9em" }} />
          </span>
        </div>
      </Tooltip>
    );
  }

  return swatchContent;
}