import { Button, Radio, Tooltip, DatePicker, Popconfirm } from "antd";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { ExclamationCircleFilled } from "@ant-design/icons";
import styles from "./index.module.scss";
import dayjs from "dayjs";
import { editWallAutoApi, getWallAutoApi } from "@/store/action/B3Wall";
import { MessageFu } from "@/utils/message";
import WallTable from "./WallTable";
import WallAdd from "./WallAdd";
const { RangePicker } = DatePicker;

function Wall() {
  // 获取自动播放信息
  const getWallAutoApiFu = useCallback(async () => {
    const res = await getWallAutoApi();
    const data = JSON.parse(res.data.content);
    setValue0(data.isAuto);
    setTime0(data.startTime + "," + data.endTime);
  }, []);

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

  // 场景管理的编辑
  const [edit, setEdit] = useState(false);

  // 自动轮播开启关闭的展示
  const [value0, setValue0] = useState(-1);

  // 自动轮播开启关闭的修改
  const [value1, setValue1] = useState(0);

  // 自动轮播时间的展示
  const [time0, setTime0] = useState(" , ");

  // 自动轮播时间的修改
  const [time1, setTime1] = useState<string[]>([]);

  // 点击修改
  const editAutoPlay = useCallback(() => {
    setValue1(value0);
    setTime1(time0.split(","));
    setEdit(true);
  }, [time0, value0]);

  // 时间选择器改变
  const timeChange = (date: any, dateString: any) => {
    setTime1(dateString);
  };

  // 点击确定
  const btnOk = useCallback(async () => {
    const obj = {
      endTime: time1[1],
      startTime: time1[0],
      isAuto: value1,
    };

    const res: any = await editWallAutoApi({ content: JSON.stringify(obj) });
    if (res.code === 0) {
      MessageFu.success("修改成功!");
      getWallAutoApiFu();
    }
    setEdit(false);
  }, [getWallAutoApiFu, time1, value1]);

  // 点击新增或者编辑
  const [editId, setEditId] = useState(0);

  const scrollRef = useRef({
    txt: "",
    num: 0,
  });

  const tablePageIdFu = useCallback((id: number, scrollNum: number) => {
    scrollRef.current = { ...scrollRef.current, num: scrollNum };
    setEditId(id);
  }, []);

  // 从新增/编辑页面点击取消或者提交
  const closeWallAddFu = useCallback((txt: string) => {
    scrollRef.current = { ...scrollRef.current, txt };
    setEditId(0);
  }, []);

  return (
    <div className={styles.Wall}>
      <div className="pageTitlt">
        {editId === 0 ? "万物墙管理" : editId > 0 ? "编辑海报" : "新增海报"}
      </div>

      {editId === 0 ? (
        // 初始页面盒子
        <>
          <div className="wallTopBox">
            <div className="titleTxt">
              场景管理
              <Tooltip title="当超过15秒未操作时，将在场景&emsp;&emsp;讲述/游览/赏析/临时展&emsp;&emsp;间循环播放，每个场景播放30秒">
                <div className="inco">
                  <ExclamationCircleFilled />
                </div>
              </Tooltip>
            </div>
            {edit ? (
              // 修改信息
              <div className="edit">
                <div>自动轮播：</div>
                <Radio.Group
                  onChange={(e) => setValue1(e.target.value)}
                  value={value1}
                >
                  <Radio value={0}>关闭</Radio>
                  <Radio value={1}>开启</Radio>
                </Radio.Group>
                &emsp;
                <RangePicker
                  allowClear={false}
                  defaultValue={[
                    dayjs(time1[0], "YYYY/MM/DD"),
                    dayjs(time1[1], "YYYY/MM/DD"),
                  ]}
                  onChange={timeChange}
                />
                &emsp;
                <Button type="primary" onClick={btnOk}>
                  确定
                </Button>
                &emsp;
                <Popconfirm
                  title="放弃编辑后，信息将不会保存!"
                  okText="放弃"
                  cancelText="取消"
                  onConfirm={() => setEdit(false)}
                >
                  <Button>取消</Button>
                </Popconfirm>
              </div>
            ) : (
              // 展示信息
              <div className="txt">
                <div>自动轮播：</div>
                <div>{value0 ? "开启" : "关闭"}&emsp;|&emsp;</div>
                <div>
                  {time0.split(",")[0]} 至 {time0.split(",")[1]}
                </div>
                &emsp;&emsp;
                <Button type="primary" onClick={editAutoPlay}>
                  修改
                </Button>
              </div>
            )}
          </div>
          {/* 表格相关 */}
          <WallTable
            tablePageIdFu={tablePageIdFu}
            scrollNumInfo={scrollRef.current}
          />
        </>
      ) : (
        <WallAdd id={editId} closeMoalFu={closeWallAddFu} />
      )}
    </div>
  );
}

const MemoWall = React.memo(Wall);

export default MemoWall;
