import { barrageSetConfigAPI } from "@/store/action/B4Barrage";
import { MessageFu } from "@/utils/message";
import { Button, Modal, Switch } from "antd";
import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";

type Props = {
  closeMoalFu: () => void;
  upBarrageFu: () => void;
  barrageValue: boolean;
};

function BarrageSet({ closeMoalFu, barrageValue, upBarrageFu }: Props) {
  const [value, setValue] = useState(false);

  useEffect(() => {
    setValue(barrageValue);
  }, [barrageValue]);

  const isEnabledClickFu = useCallback(
    async (val: boolean) => {
      const obj = {
        content: JSON.stringify({ value: val }),
      };
      const res = await barrageSetConfigAPI(obj);

      if (res.code === 0) {
        MessageFu.success("操作成功!");
        setValue(val);
        upBarrageFu();
      }
    },
    [upBarrageFu]
  );

  return (
    <Modal
      wrapClassName={styles.BarrageSet}
      destroyOnClose
      open={true}
      title="弹幕功能设置"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="main">
        <div className="row">
          <div className="tit">开关：</div>
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={value}
            onChange={(val) => isEnabledClickFu(val)}
          />
          <div className="txtTit">
            关闭后，将屏蔽场馆所有弹幕，并禁止发布弹幕留言
          </div>
        </div>
        <br />
        <div className="button">
          <Button onClick={closeMoalFu}>关闭</Button>
        </div>
      </div>
    </Modal>
  );
}

const MemoBarrageSet = React.memo(BarrageSet);

export default MemoBarrageSet;