import { Button, Space, Modal, FormInstance, Flex } from "antd";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import { Store } from "antd/lib/form/interface";
import SimpleForm from "@/components/form/simple_form";
import React from "react";
import FolderTwoTone from "@ant-design/icons/FolderOpenTwoTone";

const Archives = (props: Store) => {
  const { archivesStore } = props;
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [projectConfig, setProjectConfig] = useState<any>([]);
  const formRef = React.useRef<FormInstance>(null);
  const [tagId, setId] = useState<Number | null>(null);

  const onFinish = (values: any) => {
    let data = values;
    data.head_img = values.head_img[0].url;
    if (!tagId) {
      archivesStore.add(data);
    } else {
      archivesStore.putItem(tagId, data);
    }
    setIsModalOpen(false);
  };
  useEffect(() => {
    archivesStore.getlist("folder/list");
  }, [archivesStore]);
  const defaultConfig = [
    {
        type: "input",
        label: "所属档案分类",
        name: "ac_identity",
        value: "",
      },
    {
      type: "input",
      label: "文件夹名称",
      name: "folder_name",
      value: "",
    },
    {
        type: "input",
        label: "文件夹描述",
        name: "folder_desc",
        value: "",
      },
  ];
  const onFinishFailed = () => {};
  return (
    <div className="contentBox">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        <Space direction="horizontal" size={"middle"}>
          <Button
            type="default"
            onClick={() => {
              setProjectConfig(defaultConfig);
              setId(null);
              setIsModalOpen(true);
            }}
          >
            添加
          </Button>
        </Space>
        <Flex wrap gap="25px" justify="start">
          {Array.from({ length: archivesStore.list?.length??0 }, (_, i) => (
            <div key={i}>
              <FolderTwoTone rotate={-270} style={{ fontSize: "120px" }} />
              <p>{archivesStore.list[i].folder_name}</p>
            </div>
          ))}
        </Flex>

        <Modal
          title={!tagId ? "添加文件夹" : "编辑文件夹"}
          width={800}
          open={isModalOpen}
          afterClose={() => formRef.current?.resetFields()}
          onOk={() => formRef.current?.submit()}
          onCancel={() => {
            setId(null);
            setIsModalOpen(false);
          }}
        >
          <SimpleForm
            formRef={formRef}
            createCallback={() => {}}
            formName="card_basic"
            colProps={4}
            subBtnName="提交"
            formDatas={projectConfig}
            onFinish={onFinish}
            initialValues={true}
            onFinishFailed={onFinishFailed}
          />
        </Modal>
      </Space>
    </div>
  );
};

export default inject("archivesStore")(observer(Archives));