import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import { Button, Input, Modal, Popconfirm } from "antd";
import { MessageFu } from "@/utils/message";
import { A1_APIOadd } from "@/store/action/A1Project";
import { A1OFileType } from "@/types";

type Props = {
  closeFu: () => void;
  addFu: () => void;
  editFu: () => void;
  fileInfo: A1OFileType;
  projectId: number;
};

function A1ORenFile({ closeFu, fileInfo, addFu, editFu, projectId }: Props) {
  const [value, setValue] = useState("");

  useEffect(() => {
    if (fileInfo.id > 0 && fileInfo.type === 0) {
      const arr = fileInfo.name.split(".");
      const val = "." + arr[arr.length - 1];
      const val2 = fileInfo.name.replace(val, "");
      setValue(val2);
    } else setValue(fileInfo.name);
  }, [fileInfo]);

  const onChangeFu = useCallback((val: string) => {
    setValue(val.replace(/\s+/g, ""));
  }, []);

  const isFileType = useMemo(() => {
    let val = "";
    if (fileInfo.type === 0 && fileInfo.name) {
      const arr = fileInfo.name.split(".");
      val = arr[arr.length - 1];
    }
    return val;
  }, [fileInfo]);

  // 点击确定
  const btnOkFu = useCallback(async () => {
    if (!value) return MessageFu.warning("名称不能为空!");

    const obj = {
      id: fileInfo.id === -1 ? null : fileInfo.id,
      name: isFileType?value+`.${isFileType}`:value,
      parentId: fileInfo.parentId,
      projectId,
    };

    const res = await A1_APIOadd(obj);

    if (res.code === 0) {
      if (fileInfo.id === -1) {
        MessageFu.success("新增成功!");
        addFu();
      } else {
        MessageFu.success("重命名成功!");
        editFu();
      }
      closeFu();
    }
  }, [addFu, closeFu, editFu, fileInfo.id, fileInfo.parentId, isFileType, projectId, value]);

  return (
    <Modal
      wrapClassName={styles.A1ORenFile}
      destroyOnClose
      open={true}
      title={
        fileInfo.id === -1
          ? "新建文件夹"
          : fileInfo.type === 1
          ? "文件夹重命名"
          : "文件重命名"
      }
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A1ORMain">
        <div className="A1ORMainInput">
          {isFileType ? (
            <div className="A1ORMainInputTit">文件后缀：.{isFileType}</div>
          ) : null}

          <Input
            value={value}
            onChange={(e) => onChangeFu(e.target.value)}
            maxLength={30}
            showCount
            placeholder="请输入名称"
          />
        </div>

        <div className="A1ORBtn2">
          <Popconfirm
            title="放弃编辑后，信息将不会保存!"
            okText="放弃"
            cancelText="取消"
            onConfirm={closeFu}
            okButtonProps={{ loading: false }}
          >
            <Button>取消</Button>
          </Popconfirm>
          &emsp;
          <Button type="primary" onClick={btnOkFu}>
            确定
          </Button>
        </div>
      </div>
    </Modal>
  );
}

const MemoA1ORenFile = React.memo(A1ORenFile);

export default MemoA1ORenFile;
