import React, { useEffect, useState } from "react";
import { Card, Dropdown, Modal, Input, message } from "antd";
import { GraphType } from "@/enum";
import defaultFlowImg from "@/assets/image/flow.png";
import defaultMindImg from "@/assets/image/mindmap.png";
import { DeleteGraph, EditGraph } from "@/api/systemDesigner";
import { GetFile } from "@/api";

export default function ProjectCard({
  record,
  onFresh,
  onDelete,
  onChangeLocation,
  hideRemove,
}: {
  record: any;
  onFresh: () => void;
  onDelete: () => void;
  onChangeLocation: (id: string) => void;
  hideRemove?: boolean;
}) {
  const [showMenu, setShowMenu] = useState(false);
  const handleToEdit = () => {
    const { origin, pathname } = window.location;
    const enterpriseCode = sessionStorage.getItem("enterpriseCode");
    if (record.type === GraphType.mindmap) {
      window.open(
        `${origin}${pathname}#/mindmap/${record.id}?enterpriseCode=${enterpriseCode}`
      );
    } else {
      window.open(
        `${origin}${pathname}#/flow/${record.id}?enterpriseCode=${enterpriseCode}`
      );
    }
  };

  const { confirm } = Modal;

  const [coverImg, setCoverImg] = useState<string>("");
  useEffect(() => {
    if (record.coverImage) {
      GetFile({ fileId: record.coverImage }).then((res) => {
       const blob = new Blob([res], { type: "image/png" });
       const url = URL.createObjectURL(blob);
       console.log(url)
       setCoverImg(url);
      });
    }
  }, []);

  return (
    <Card
      hoverable
      cover={
        <img
          style={{
            height: 120,
            objectFit: "cover",
            border: "solid 1px #f5f5f5",
          }}
          src={
            record?.coverImage
              ? coverImg
              : record.type === GraphType.mindmap
                ? defaultMindImg
                : defaultFlowImg
          }
        />
      }
      onClick={() => handleToEdit()}
      onMouseOver={() => setShowMenu(true)}
      onMouseOut={() => setShowMenu(false)}
    >
      {showMenu && (
        <Dropdown
          menu={{
            items: [
              {
                key: "1",
                label: "重命名",
                onClick: () => {
                  let name = record.name;
                  confirm({
                    title: "重命名",
                    centered: true,
                    icon: <></>,
                    content: (
                      <Input
                        defaultValue={name}
                        onChange={(e) => {
                          name = e.target.value;
                        }}
                      />
                    ),
                    onOk: async () => {
                      await EditGraph({
                        id: record.id,
                        langNameList: [
                          {
                            name: "zh-CN",
                            value: name,
                          },
                        ],
                      });
                      onFresh?.();
                      message.success("重命名成功");
                    },
                  });
                },
              },
              !hideRemove
                ? {
                    key: "2",
                    label: "移动/复制",
                    onClick: () => {
                      onChangeLocation?.(record.id);
                    },
                  }
                : null,
              {
                key: "3",
                label: "删除",
                danger: true,
                onClick: () => {
                  confirm({
                    title: "删除",
                    content: "确定删除该图形？",
                    centered: true,
                    onOk: async () => {
                      await DeleteGraph({
                        id: record.id,
                      });
                      onDelete?.();
                      message.success("删除成功");
                    },
                  });
                },
              },
            ],
            onClick: (e) => {
              e.domEvent.stopPropagation();
            },
          }}
        >
          <div
            className="absolute right-8px top-8px cursor-pointer bg-#adadad99 px-12px rounded-4px text-12px line-height-16px color-#fff"
            onClick={(e) => {
              e.stopPropagation();
            }}
          >
            <i className="iconfont icon-a-zu10687" />
          </div>
        </Dropdown>
      )}
      <Card.Meta
        title={
          <span>
            {record.type === GraphType.mindmap ? (
              <i
                className={`iconfont icon-siweidaotu_huaban1 mr-8px`}
                style={{ color: "#9ae396" }}
              />
            ) : (
              <i className={`iconfont icon-liuchengtu color-#067bef mr-8px`} />
            )}
            {record.name}
          </span>
        }
        description={`更新于: ${record.updatedTime}`}
      />
    </Card>
  );
}
