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";

const titleObj = {
  user: "用户活跃",
  game: "爱心林场",
  other: "其他小游戏",
};

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

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

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

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

    const res = await A2_APIsave(obj);

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

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

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

  return (
    <Modal
      wrapClassName={styles.A2edit}
      open={true}
      title={`${Reflect.get(titleObj, editInfo.type)} - 编辑`}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A2eMain">
        <div className="A2eRow">
          <div className="A2eRow1 A2eRow3">
            {editInfo.type === "user"
              ? "行为："
              : editInfo.type === "game"
              ? "动植物："
              : "游戏名称："}
          </div>
          <div className="A2eRow2">{editInfo.name}</div>
        </div>

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

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

        {editInfo.type === "other" ? (
          <div className="A2eRow">
            <div className="A2eRow1 A2eRow3">
              <span> </span>
              奖励说明：
            </div>
            <div className="A2eRow2">{editInfo.description}</div>
          </div>
        ) : null}

        <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;
