import React, {
  useState,
  forwardRef,
  useImperativeHandle,
  useRef,
} from "react";
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
import CommonPopup from "../CommonPopup";
import styles from "./index.module.scss";
import detailService from "@/services/detailService";
import { useUserInfo } from "@/store/userStore";

const CancelPopup = forwardRef((props, ref) => {
  const [visible, setVisible] = useState(false);
  const onFinish = useRef(null);

  useImperativeHandle(ref, () => ({
    show: (onAct) => {
      onFinish.current = onAct;
      setVisible(true);
    },
  }));

  function onClose() {
    setVisible(false);
  }
  return (
    <>
      <CommonPopup
        visible={visible}
        showHeader={false}
        hideFooter
        zIndex={1002}
        enableDragToClose={false}
        onClose={onClose}
      >
        <View className={styles.container}></View>
      </CommonPopup>
    </>
  );
});

export default forwardRef(function GameManagePopup(props, ref) {
  const [visible, setVisible] = useState(false);
  const [detail, setDetail] = useState({});
  const onStatusChange = useRef(null);
  const cancelRef = useRef(null);
  const userInfo = useUserInfo();

  useImperativeHandle(ref, () => ({
    show: (gameDetail, onChange) => {
      onStatusChange.current = onChange;
      setDetail(gameDetail);
      setVisible(true);
    },
  }));

  function handleEditGame() {
    Taro.navigateTo({
      url: `/publish_pages/publishBall/index?gameId=${detail.id}`,
    });
    onClose()
  }

  const handleRepubGame = handleEditGame;

  async function handleCancelGame() {
    cancelRef.current.show(async (result) => {
      if (result) {
        try {
          const res = await detailService.disbandGame({
            game_id: detail.id,
            settle_reason: result,
          });
          if (res.code === 0) {
            Taro.showToast({ title: "活动取消成功" });
            onStatusChange.current?.(true);
          }
        } catch (e) {
          Taro.showToast({ title: e.message, icon: "error" });
        } finally {
          onClose();
        }
      }
    });
  }

  async function handleQuitGame() {
    try {
      const res = await detailService.organizerQuit({
        game_id: detail.id,
        quit_reason: "组织者主动退出",
      });
      if (res.code === 0) {
        Taro.showToast({ title: "活动退出成功" });
        onStatusChange.current?.(true);
      }
    } catch (e) {
      Taro.showToast({ title: e.message, icon: "error" });
    } finally {
      onClose();
    }
  }

  function onClose() {
    setVisible(false);
  }

  const hasJoin = (detail.participants || []).some(item => item.user.id === userInfo.id)

  return (
    <>
      <CommonPopup
        visible={visible}
        showHeader={false}
        hideFooter
        zIndex={1001}
        enableDragToClose={false}
        onClose={onClose}
      >
        <View className={styles.container}>
          <View className={styles.button} onClick={handleEditGame}>
            编辑活动
          </View>
          <View className={styles.button} onClick={handleRepubGame}>
            重新发布
          </View>
          <View className={styles.button} onClick={handleCancelGame}>
            取消活动
          </View>
          {hasJoin && (
            <View className={styles.button} onClick={handleQuitGame}>
              退出活动
            </View>
          )}
          <View className={styles.button} onClick={onClose}>
            取消
          </View>
        </View>
      </CommonPopup>
      <CancelPopup ref={cancelRef} />
    </>
  );
});