import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button, Empty, Modal, Popconfirm } from "antd";
import classNames from "classnames";
import { MessageFu } from "@/utils/message";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import { A1OFileType } from "@/types";
import { A1_APIOgetListMove, A1_APIOmove } from "@/store/action/A1Project";

type Props = {
  mId: { id: number; name: string };
  id1: { id: number; name: string };
  id2: { id: number; name: string };
  closeFu: () => void;
  projectId: number;
  moveSuFu: () => void;
};

function A1OMove({ mId, id1, id2, closeFu, projectId, moveSuFu }: Props) {
  // 从仓库获取左侧写死列表
  const A1OleftArr = useSelector(
    (state: RootState) => state.A1Project.A1OleftArr
  );

  // 一级id
  const [tab1, setTab1] = useState({ id: 0, name: "" });

  // 二级id
  const [tab2, setTab2] = useState({ id: 0, name: "" });

  // 表格数据
  const [tableInfo, setTableInfo] = useState([] as A1OFileType[]);

  useEffect(() => {
    setTableInfo(A1OleftArr);
  }, [A1OleftArr]);

  // 封装发送请求的函数
  const getListFu = useCallback(
    async (id: number) => {
      const res = await A1_APIOgetListMove(projectId, id);

      if (res.code === 0) {
        const data:A1OFileType[] =res.data.records
        setTableInfo(data.filter(v=>v.type===1));
      }
    },
    [projectId]
  );

  // 选中文件夹
  const cutFileFu = useCallback(
    (id: number, name: string, type?: 0 | 1) => {
      if (type === 1) {
        if (tab1.id) {
          // 第二级

          setTab2({ id, name });
        } else {
          // 第一级
          setTab1({ id, name });
          setTab2({ id: 0, name: "" });
        }
      }
    },
    [tab1.id]
  );

  useEffect(() => {
    if (tab1.id) getListFu(tab1.id);
  }, [getListFu, tab1]);

  useEffect(() => {
    if (tab2.id) getListFu(tab2.id);
  }, [getListFu, tab2.id]);

  // 面包屑的根目录
  const mianB1Fu = useCallback(() => {
    setTableInfo(A1OleftArr);
    setTab1({ id: 0, name: "" });
    setTab2({ id: 0, name: "" });
  }, [A1OleftArr]);

  const mianB2Fu = useCallback(() => {
    if (tab2.id) {
      setTab1({ id: tab1.id, name: tab1.name });

      setTab2({ id: 0, name: "" });
    }
  }, [tab1.id, tab1.name, tab2.id]);

  // 点击移动
  const btnOkFu = useCallback(async () => {
    if (tab2.id) {
      // 进入到了二级
      if (tab2.id === id2.id) return MessageFu.warning("不能和之前的位置一样!");
    } else if (tab1.id && !id2.id) {
      // 一级
      if (tab1.id === id1.id) return MessageFu.warning("不能和之前的位置一样!");
    }

    const res = await A1_APIOmove(mId.id, tab2.id ? tab2.id : tab1.id);

    if (res.code === 0) {
      MessageFu.success("移动成功!");
      moveSuFu();
      closeFu();
    }
  }, [closeFu, id1.id, id2.id, mId.id, moveSuFu, tab1.id, tab2.id]);

  return (
    <Modal
      wrapClassName={styles.A1OMove}
      destroyOnClose
      open={true}
      title="移动文件"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A1OMMain">
        <div className="A1OMTit">
          当前文件位置：{id1.name} {id2.id ? <>/ {id2.name}</> : null} /{" "}
          {mId.name}
        </div>

        <div className="A1OMxie">
          <span onClick={mianB1Fu}>根目录</span>

          {tab1.id ? (
            <>
              {">"} <span onClick={mianB2Fu}>{tab1.name}</span>
            </>
          ) : null}
          {tab2.id ? (
            <>
              <span>
                {" "}
                {">"} {tab2.name}
              </span>
            </>
          ) : null}
        </div>

        {tableInfo.length <= 0 ? (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        ) : (
          <div className="A1OMArr">
            {tableInfo.map((v) => (
              <div
                className={classNames(
                  "A1OMArrRow",
                  v.type === 1 ? "A1OMArrRowAc" : ""
                )}
                key={v.id}
                onClick={() => cutFileFu(v.id, v.name, v.type)}
              >
                {v.name}
              </div>
            ))}
          </div>
        )}

        <div className="A1OMBtn">
          <Popconfirm
            title="放弃编辑后，信息将不会保存!"
            okText="放弃"
            cancelText="取消"
            onConfirm={closeFu}
            okButtonProps={{ loading: false }}
          >
            <Button>取消</Button>
          </Popconfirm>
          &emsp;
          <Button type="primary" onClick={btnOkFu} disabled={!tab1.id}>
            移动至此
          </Button>
        </div>
      </div>
    </Modal>
  );
}

const MemoA1OMove = React.memo(A1OMove);

export default MemoA1OMove;
