import { Tag, TagProps, Popover, Input, Button, ColorPicker } from "antd";
import React, { useState } from "react";

export default function CustomTag(
  props: TagProps & {
    hideAdd?: boolean;
    onAdd?: () => void;
    onDelete?: () => void;
    onChangeTag: (tagInfo: { color: string; name: string }) => void;
    hideEditBtn?: boolean;
  }
) {
  const [title, setTitle] = useState(props.title);
  const [open, setOpen] = useState(false);
  const [showIcon, setShowIcon] = useState(false);

  const colors = [
    "#e75e5b",
    "#e78f49",
    "#5ab7af",
    "#52aaee",
    "#6e4dbe",
    "#d6f0f8",
  ];

  const ColorBtn = ({
    color,
    value,
    onClick,
  }: {
    color?: string;
    value: string;
    onClick: () => void;
  }) => {
    return (
      <div
        className={`relative w-24px h-24px cursor-pointer rounded-4px flex items-center justify-center hover:opacity-80`}
        style={{
          background: color,
          border: !color ? "1px solid #000" : "",
        }}
        onClick={onClick}
      >
        {color === value && (
          <i className="iconfont icon-zhengque-1 color-#fff" />
        )}
        {!color && (
          <i className="absolute left-0 top-0 block w-1px h-24px bg-#de0f18 origin-top-left rotate--45" />
        )}
      </div>
    );
  };

  const handleChange = (key: string, value: string) => {
    props?.onChangeTag?.({
      name: props.title || "",
      color: props.color || "",
      [key]: value,
    });
  };

  return (
    <div className="inline">
      <Popover
        trigger={"click"}
        open={open}
        placement="bottom"
        onOpenChange={(visible) => !visible && setOpen(visible)}
        content={
          <div>
            <Input
              placeholder="标签名"
              value={title}
              onChange={(e) => {
                setTitle(e.target.value);
              }}
              onBlur={() => {
                handleChange("name", title || props.title || "空标签");
              }}
              onPressEnter={() => {
                handleChange("name", title || props.title || "空标签");
              }}
            />

            <div className="flex gap-8px my-16px">
              {colors.map((color) => (
                <ColorBtn
                  key={color}
                  color={color}
                  value={props.color as string}
                  onClick={() => handleChange("color", color)}
                />
              ))}
              <ColorPicker
                format="hex"
                onChange={(value) => handleChange("color", value.toHexString())}
              >
                <Button
                  type="text"
                  icon={
                    <i
                      className="iconfont icon-bi"
                      style={{ color: props.color }}
                    />
                  }
                  size="small"
                ></Button>
              </ColorPicker>
            </div>
            <div className="flex justify-between">
              {!props.hideAdd && (
                <span
                  className="text-12px cursor-pointer color-#067bef"
                  onClick={props?.onAdd}
                >
                  添加到我的标签
                </span>
              )}
              <span
                className="text-12px cursor-pointer color-#9aa5b8 hover:color-#eb5555"
                onClick={() => {
                  props?.onDelete?.();
                  setOpen(false);
                }}
              >
                删除此标签
              </span>
            </div>
          </div>
        }
      >
        <Tag
          {...props}
          onMouseEnter={() => setShowIcon(true)}
          onMouseLeave={() => setShowIcon(false)}
          icon={
            !props.hideEditBtn && showIcon && (
              <i
                className="iconfont icon-bianji- text-12px mr-4px cursor-pointer"
                onClick={() => setOpen(true)}
              />
            )
          }
          onClick={(e) => {
            props?.onClick?.(e);
            props.hideEditBtn && setOpen(true);
          }}
        />
      </Popover>
    </div>
  );
}
