import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import { Button, Input, Modal } from "antd";
import { A2editInfoType } from "@/types";
import MyPopconfirm from "@/components/MyPopconfirm";
import { MessageFu } from "@/utils/message";
import { A2_APIsave } from "@/store/action/A2integral";

type Props = {
  editInfo: A2editInfoType;
  closeFu: () => void;
  upTableFu: () => void;
};

function A2edit({ editInfo, closeFu, upTableFu }: Props) {
  const [day, setDay] = useState(0);
  const [score, setScore] = useState(0);

  useEffect(() => {
    setDay(editInfo.day || 1);
    setScore(editInfo.score);
  }, [editInfo.day, editInfo.score]);

  // 点击确定
  const btnOkFu = useCallback(async () => {
    const obj = {
      id: editInfo.id,
      cycle: day,
      score,
    };

    const res = await A2_APIsave(obj);

    if (res.code === 0) {
      MessageFu.success("编辑成功!");
      upTableFu();
      closeFu();
    }
  }, [closeFu, day, editInfo.id, score, upTableFu]);

  // 禁用按钮
  const inputNumRes = useMemo(() => {
    let flag = false;
    if (!day) flag = true;
    if (!score) flag = true;
    return flag;
  }, [day, score]);

  const inputChange = useCallback(
    (val: React.ChangeEvent<HTMLInputElement>, type: "day" | "score") => {
      let txt = val.target.value.replace(/^(0+)|[^\d]+/g, "");
      let txtNum = Number(txt);
      if (type === "day") {
        txtNum = txtNum > 99 ? 99 : txtNum;
        setDay(txtNum);
      } else {
        txtNum = txtNum > 9999 ? 9999 : txtNum;
        setScore(txtNum);
      }
    },
    []
  );

  return (
    <Modal
      wrapClassName={styles.A2edit}
      open={true}
      title={`${editInfo.type === "user" ? "用户活跃" : "爱心林场"} - 编辑`}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A2eMain">
        <div className="A2eRow">
          <div className="A2eRow1 A2eRow3">
            {editInfo.type === "user" ? "行为：" : "动植物："}
          </div>
          <div className="A2eRow2">{editInfo.name}</div>
        </div>

        {editInfo.type === "game" ? (
          <div className="A2eRow">
            <div className="A2eRow1">
              <span>* </span>成熟周期（天）：
            </div>
            <div className="A2eRow2">
              <Input
                style={{ width: 160 }}
                placeholder="请输入1~99整数"
                value={day}
                onChange={(e) => inputChange(e, "day")}
              />
            </div>
          </div>
        ) : null}

        <div className="A2eRow">
          <div className="A2eRow1">
            <span>* </span>奖励爱心币：
          </div>
          <div className="A2eRow2">
            <Input
              style={{ width: 160 }}
              placeholder="请输入1~9999整数"
              value={score}
              onChange={(e) => inputChange(e, "score")}
            />
          </div>
        </div>

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

const MemoA2edit = React.memo(A2edit);

export default MemoA2edit;
