import React, { useCallback, useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";
import { A3_APIgetConfig, A3_APIsaveConfig } from "@/store/action/A3play";
import { Button, InputNumber, Radio } from "antd";
import { MessageFu } from "@/utils/message";
import MyPopconfirm from "@/components/MyPopconfirm";

const arr1 = [
  "无",
  "飞入",
  "劈裂",
  "百叶窗",
  "落叶式",
  "规则图形路径",
  "圆形展开",
];

const arr2 = ["关", "海报", "视频"];

function A3play() {
  const getConfigFu = useCallback(async () => {
    const res = await A3_APIgetConfig();
    if (res.code === 0) {
      const info1 = JSON.parse(res.data[0].content || '{"val":"无"}');
      setVal1(info1.val || "无");
      val1Ref.current = info1.val || "无";

      const info2 = JSON.parse(res.data[1].content || '{"val":"关","time":1}');
      const obj = { val: info2.val || "关", time: info2.time || 1 };
      setVal2(obj);
      val2Ref.current = obj;
    }
  }, []);

  useEffect(() => {
    getConfigFu();
  }, [getConfigFu]);

  // 播放动画的设置
  const [val1, setVal1] = useState("无");
  const val1Ref = useRef("无");

  const [edit1, setEdit1] = useState(false);

  // 自动播放的设置
  const [val2, setVal2] = useState({ val: "关", time: 1 });
  const val2Ref = useRef({ val: "关", time: 1 });

  const [edit2, setEdit2] = useState(false);

  // 点击提交
  const btnOkFu = useCallback(
    async (id: 1 | 2) => {
      const content1 = JSON.stringify({ val: val1 });

      const content2 = JSON.stringify({ val: val2.val, time: val2.time });

      const res = await A3_APIsaveConfig({
        id,
        content: id === 1 ? content1 : content2,
      });

      if (res.code === 0) {
        MessageFu.success("设置成功");
        id === 1 ? setEdit1(false) : setEdit2(false);
        getConfigFu();
      }
    },
    [getConfigFu, val1, val2.time, val2.val]
  );

  return (
    <div className={styles.A3play}>
      <div className="pageTitle">播放管理</div>

      <div className="A3row">
        <div className="A3row1">播放动画：</div>

        {edit1 ? (
          <div className="A3row2">
            {arr1.map((v) => (
              <Radio
                key={v}
                value={val1}
                onClick={() => setVal1(v)}
                checked={v === val1}
              >
                {v}
              </Radio>
            ))}
          </div>
        ) : (
          <div className="A3row2">{val1}</div>
        )}

        <div className="A3row3">
          {edit1 ? (
            <>
              <MyPopconfirm
                txtK="取消"
                onConfirm={() => {
                  setVal1(val1Ref.current);
                  setEdit1(false);
                }}
              />
              &emsp;
              <Button type="primary" onClick={() => btnOkFu(1)}>
                提交
              </Button>
            </>
          ) : (
            <Button type="primary" onClick={() => setEdit1(true)}>
              设置
            </Button>
          )}
        </div>
      </div>

      <div className="A3row">
        <div className="A3row1">自动播放：</div>
        {edit2 ? (
          <div className="A3row2">
            {arr2.map((v) => (
              <Radio
                key={v}
                value={val2}
                onClick={() => setVal2({ val: v, time: val2.time })}
                checked={v === val2.val}
              >
                {v}
              </Radio>
            ))}
            {/* 选中海报的时候出来的 输入框 */}
            {val2.val === "海报" ? (
              <div className="A3row2Input">
                <div className="A3row2InputTit">
                  <span>* </span>轮播间隔：
                </div>
                <InputNumber
                  style={{ width: 160 }}
                  min={1}
                  max={99}
                  placeholder="请输入1~99整数"
                  precision={0}
                  value={val2.time}
                  onChange={(e) => setVal2({ val: val2.val, time: e || 1 })}
                />
                &nbsp;秒
              </div>
            ) : null}
          </div>
        ) : (
          <div className="A3row2">
            {val2.val}
            {val2.val === "海报" ? (
              <>&emsp;&emsp;轮播间隔：{val2.time}秒</>
            ) : (
              ""
            )}
          </div>
        )}

        <div className="A3row3">
          {edit2 ? (
            <>
              <MyPopconfirm
                txtK="取消"
                onConfirm={() => {
                  setVal2(val2Ref.current);
                  setEdit2(false);
                }}
              />
              &emsp;
              <Button type="primary" onClick={() => btnOkFu(2)}>
                提交
              </Button>
            </>
          ) : (
            <Button type="primary" onClick={() => setEdit2(true)}>
              设置
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}

const MemoA3play = React.memo(A3play);

export default MemoA3play;
