import React, { useEffect, useState } from "react";
import { Card, Dropdown, Modal, Input, message, Tooltip } from "antd";
import defaultImg from "@/assets/image/default.png";
import { GetFile, DeleteDataModel, SaveDataModel } from "@/api";
import {
  EditOutlined,
  FileTextOutlined,
  EllipsisOutlined,
} from "@ant-design/icons";

export default function ProjectCard({
  record,
  onFresh,
  onDelete,
  onChangeLocation,
  hideRemove,
}: {
  record: any;
  onFresh: () => void;
  onDelete: () => void;
  onChangeLocation: (id: string) => void;
  hideRemove?: boolean;
}) {
  const handleToDetail = () => {
    const { origin, pathname } = window.location;
    const enterpriseCode = sessionStorage.getItem("enterpriseCode");
    window.open(
      `${origin}${pathname}#/detail/${record.id}?enterpriseCode=${enterpriseCode}`
    );
  };

  const handleToEdit = () => {
    const { origin, pathname } = window.location;
    const enterpriseCode = sessionStorage.getItem("enterpriseCode");
    window.open(
      `${origin}${pathname}#/er/${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);
        setCoverImg(url);
      });
    }
  }, []);

  const actions: React.ReactNode[] = [
    <EditOutlined key="edit" onClick={handleToEdit}/>,
    <FileTextOutlined key="setting" onClick={handleToDetail}/>,
    <Dropdown
      key="more"
      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 SaveDataModel({
                    erDataModel: {
                      ...record,
                      name,
                    }
                  });
                  message.success("更新成功");
                  onFresh();
                },
              });
            },
          },
          !hideRemove
            ? {
                key: "2",
                label: "移动",
                onClick: () => {
                  onChangeLocation?.(record.id);
                },
              }
            : null,
          {
            key: "3",
            label: "删除",
            danger: true,
            onClick: () => {
              confirm({
                title: "删除",
                content: "确定删除该模型？",
                centered: true,
                onOk: async () => {
                  await DeleteDataModel({
                    id: record.id,
                  });
                  onDelete?.();
                  message.success("删除成功");
                },
              });
            },
          },
        ],
        onClick: (e) => {
          e.domEvent.stopPropagation();
        },
      }}
      trigger={["click"]}
    >
      <EllipsisOutlined/>
    </Dropdown>,
  ];

  return (
    <Card
      hoverable
      cover={
        <img
          style={{
            height: 120,
            objectFit: "cover",
            border: "solid 1px #f5f5f5",
          }}
          src={coverImg || defaultImg}
          onClick={handleToDetail}
        />
      }
      actions={actions}
    >
      <Card.Meta
        title={
          <div>
            <div>
              <Tooltip title={record.name}>
                <span className="flex-1 truncate ">{record.name}</span>
              </Tooltip>
            </div>
            <div className="text-12px font-normal color-#999">
              更新：{record.updateTime}
            </div>
          </div>
        }
        description={
          <span className="block truncate">
            <Tooltip title={record.description}>
              {record.description || "暂无描述"}
            </Tooltip>
          </span>
        }
      />
    </Card>
  );
}
