import React, { useCallback, useMemo, useState } from "react";
import styles from "./index.module.scss";
import { Button, InputNumber, Modal } from "antd";
import MyPopconfirm from "@/components/MyPopconfirm";
import TextArea from "antd/es/input/TextArea";
import { A1_APIsetNum } from "@/store/action/A1wxuser";
import { MessageFu } from "@/utils/message";

type Props = {
  editInfo: { num: number; id: number };
  closeFu: () => void;
  upTableFu: (val: number) => void;
};

function A1aEdit({ editInfo, closeFu, upTableFu }: Props) {
  const [inputNum, setInputNum] = useState<number | null>(null);
  const [text, setText] = useState("");

  // useEffect(() => {
  //   console.log(inputNum);
  // }, [inputNum]);

  // 爱心币的值控制
  const inputNumRes = useMemo(() => {
    let flag = false;
    if (!inputNum || (inputNum + "").includes(".")) flag = true;
    else if (inputNum + editInfo.num > 99999 || editInfo.num + inputNum < 0)
      flag = true;
    return flag;
  }, [inputNum, editInfo.num]);

  // 点击确定
  const btnOkFu = useCallback(async () => {
    const obj = {
      description: text,
      score: inputNum,
      type: "编辑",
      userId: editInfo.id,
    };

    const res = await A1_APIsetNum(obj);

    if (res.code === 0) {
      MessageFu.warning("编辑成功!");
      upTableFu(editInfo.num + inputNum!);
      closeFu();
    }
  }, [closeFu, editInfo.id, editInfo.num, inputNum, text, upTableFu]);

  return (
    <Modal
      wrapClassName={styles.A1aEdit}
      open={true}
      title={`修改爱心币 - 当前爱心币：${editInfo.num}`}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A1aEmain">
        <div className="A1aErow">
          <div className="A1aErow1">
            <span>* </span>爱心币变动：
          </div>
          <div className="A1aErow2">
            <InputNumber
              // min={-num}
              // max={99999 - num}
              value={inputNum}
              precision={0}
              onChange={(e) => setInputNum(e)}
              placeholder={`请输入${-editInfo.num}至${
                99999 - editInfo.num
              }的整数；该数量为爱心币的变量而非总量`}
            />
          </div>
        </div>

        <div className="A1aErow">
          <div className="A1aErow1">修改原因：</div>
          <div className="A1aErow2">
            <TextArea
              value={text}
              onChange={(e) => setText(e.target.value.replace(/\s+/g, ""))}
              placeholder="请输入说明，不超过200字"
              showCount
              maxLength={200}
            />
          </div>
        </div>

        <div className="A1aEbtn">
          <Button type="primary" onClick={btnOkFu} disabled={inputNumRes}>
            提交
          </Button>
          &emsp;
          <MyPopconfirm txtK="取消" onConfirm={closeFu} />
        </div>
      </div>
    </Modal>
  );
}

const MemoA1aEdit = React.memo(A1aEdit);

export default MemoA1aEdit;
