import { Button, Modal, Popconfirm, Radio } from "antd";
import React, { useCallback, useState } from "react";
import classNames from "classnames";
import "./index.css";
import { goodsBarrageAllAPI } from "@/store/action/B2Goods";
import { MessageFu } from "@/utils/message";

type Props = {
  closeMoalFu: () => void;
  editListFu: () => void;
};

function GoodsBarrage({ closeMoalFu, editListFu }: Props) {
  const [value, setValue] = useState(-1);

  const [check, setCheck] = useState(false);

  // 点击提交
  const btnOk = useCallback(async () => {
    if (value === -1) {
      setCheck(true);
      return;
    }

    const res = await goodsBarrageAllAPI(value);

    if (res.code === 0) {
      MessageFu.success("操作成功!");
      closeMoalFu();
      editListFu();
    }
  }, [closeMoalFu, editListFu, value]);

  return (
    <Modal
      wrapClassName="GoodsBarrage"
      destroyOnClose
      open={true}
      title="弹幕开关批量设置"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="main">
        <div className="row">
          <Radio.Group onChange={(e) => setValue(e.target.value)} value={value}>
            <Radio value={1}>全部开启</Radio>
            <Radio value={0}>全部关闭</Radio>
          </Radio.Group>
        </div>
        <div
          className={classNames(
            "rowTit",
            check && value === -1 ? "rowTitAc" : ""
          )}
        >
          请选择全部开启或关闭!
        </div>
        <div className="button">
          <Button type="primary" onClick={btnOk}>
            提交
          </Button>
          &emsp;
          <Popconfirm
            title="放弃编辑后，信息将不会保存!"
            okText="放弃"
            cancelText="取消"
            onConfirm={closeMoalFu}
          >
            <Button>取消</Button>
          </Popconfirm>
        </div>
      </div>
    </Modal>
  );
}

const MemoGoodsBarrage = React.memo(GoodsBarrage);

export default MemoGoodsBarrage;
