import React, { useEffect, useState } from "react";
import { ProTable, PageContainer } from "@ant-design/pro-components";
import { Col, Row, Button, Breadcrumb, Empty, Modal, Tree } from "antd";
import { useRequest } from "umi";
import { AppstoreOutlined, MenuOutlined } from "@ant-design/icons";
import { RecentFile } from "@/api/systemDesigner";
import ProjectCard from "./ProjectCard";
import { graphOptions } from "./data";
import { GraphType } from "@/enum";

export default function Recently({ updateKey }: { updateKey: number }) {
  const [display, setDisplay] = useState("card");
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [total, setTotal] = useState(0);
  const [searchName, setSearchName] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const [open, setOpen] = useState(false);

  const { loading, run, refresh } = useRequest(RecentFile, {
    onSuccess: (res) => {
      const list = res?.result || [];
      setDataSource(list);
      setTotal(list.length);
    },
  });

  useEffect(() => {
    run();
  }, [updateKey]);

  const FolderIcon = function () {
    return (
      <svg className="icon" aria-hidden="true">
        <use xlinkHref="#icon-weibiaoti-_huabanfuben"></use>
      </svg>
    );
  };

  const folderTreeData = [
    {
      key: "1",
      title: (
        <span>
          我的文件<span className="text-12px color-#999">(当前)</span>
        </span>
      ),
      icon: <FolderIcon />,
      children: [
        {
          key: "1-1",
          title: "文件夹1",
          icon: <FolderIcon />,
        },
      ],
    },
  ];

  // 搜索文件
  const handleSearch = () => {
    setCurrentPage(1);
    run();
  };
  // 搜索图形类型
  const setSearchGraphType = (type: GraphType) => {};

  return (
    <>
      <PageContainer extra={false} title={false} footer={[]}>
        <div className="flex justify-between items-center mb-12px">
          <Breadcrumb
            items={[
              {
                title: "最近",
              },
            ]}
          ></Breadcrumb>
          <Button
            key="2"
            onClick={() => {
              setDisplay(display === "card" ? "list" : "card");
            }}
            icon={display === "card" ? <MenuOutlined /> : <AppstoreOutlined />}
          />
        </div>
        {display === "card" ? (
          <>
            <Row gutter={[8, 16]}>
              {dataSource.map((item, index) => {
                return (
                  <Col xs={12} sm={8} md={6} lg={6} xl={6} xxl={6} key={index}>
                    <ProjectCard
                      record={item}
                      onFresh={refresh}
                      onDelete={refresh}
                      onChangeLocation={() => {}}
                      hideRemove={true}
                    />
                  </Col>
                );
              })}
            </Row>
            {dataSource.length == 0 ? <Empty description="暂无数据" /> : null}
          </>
        ) : (
          <ProTable
            loading={loading}
            columns={[
              {
                title: "名称",
                dataIndex: "name",
              },
              {
                title: "类型",
                dataIndex: "type",
              },
              {
                title: "修改时间",
                dataIndex: "updatedTime",
                sorter: (a, b) => a.updateTime - b.updateTime,
              },
            ]}
            dataSource={dataSource}
            rowKey={"id"}
            search={false}
            pagination={{
              total: total,
              pageSize: 10,
              current: currentPage,
              pageSizeOptions: ["12", "24", "36"],
              onChange: (page, pageSize) => {
                setCurrentPage(page);
              },
            }}
          />
        )}
      </PageContainer>

      <Modal
        title="移动/复制到"
        width={440}
        open={open}
        onCancel={() => setOpen(false)}
        centered
        footer={
          <div>
            <Button className="m-r-8px" onClick={() => setOpen(false)}>
              取消
            </Button>
            <Button
              className="m-r-8px"
              type="primary"
              onClick={() => setOpen(false)}
            >
              移动
            </Button>
            <Button type="primary" onClick={() => setOpen(false)}>
              复制
            </Button>
          </div>
        }
      >
        <div className="min-h-300px">
          <Tree treeData={folderTreeData} showIcon blockNode />
        </div>
      </Modal>
    </>
  );
}