import React, { useState } from "react";
import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import styles from "./index.module.scss";
import images from "@/config/images";
import AiImportPopup from "@/publish_pages/publishBall/components/AiImportPopup";

export interface PublishMenuProps {
  onPersonalPublish?: () => void;
  onActivityPublish?: () => void;
}

const PublishMenu: React.FC<PublishMenuProps> = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [aiImportVisible, setAiImportVisible] = useState(false);

  const handleIconClick = () => {
    setIsVisible(!isVisible);
  };
  const handleOverlayClick = () => {
    setIsVisible(false);
  };
  const handleMenuItemClick = (type: "individual" | "group" | "ai") => {
    // 跳转到publishBall页面并传递type参数
    console.log(type, "type");
    if (type === "ai") {
      setAiImportVisible(true);
      setIsVisible(false);
      return;
    }
    Taro.navigateTo({
      url: `/publish_pages/publishBall/index?type=${type}`,
    });
    setIsVisible(false);
  };

  const handleAiImportClose = () => {
    setAiImportVisible(false);
  };

  const handleManualPublish = () => {
    Taro.navigateTo({
      url: "/publish_pages/publishBall/index?type=individual",
    });
  };

  return (
    <View className={styles.publishMenu}>
      {/* 蒙层 */}
      {isVisible && (
        <View className={styles.overlay} onClick={handleOverlayClick} />
      )}
      {/* 菜单选项 */}
      {isVisible && (
        <View className={styles.menuCard}>
          <View
            className={styles.menuItem}
            onClick={() => handleMenuItemClick("individual")}
          >
            <View className={styles.menuContent}>
              <View className={styles.menuTitle}>
                发布个人约球
                <View className={styles.menuArrow}>
                  <Image
                    src={images.ICON_ARROW_RIGHT_BLACK}
                    className={styles.img}
                  />
                </View>
              </View>
              <Text className={styles.menuDesc}>
                已订场，找球友；未订场，找搭子
              </Text>
            </View>
            <View className={styles.menuIcon}>
              <Image src={images.ICON_PERSON} />
            </View>
          </View>

          <View
            className={styles.menuItem}
            onClick={() => handleMenuItemClick("group")}
          >
            <View className={styles.menuContent}>
              <View className={styles.menuTitle}>
                发布畅打活动
                <View className={styles.menuArrow}>
                  <Image
                    src={images.ICON_ARROW_RIGHT_BLACK}
                    className={styles.img}
                  />
                </View>
              </View>
              <Text className={styles.menuDesc}>认证球场官方组织</Text>
            </View>
            <View className={styles.menuIcon}>
              <Image src={images.ICON_GROUP} />
            </View>
          </View>
          <View
            className={`${styles.menuItem} ${styles.aiItem}`}
            onClick={() => handleMenuItemClick("ai")}
          >
            <View className={styles.menuContent}>
              <View className={styles.menuTitle}>
                智能发布球局
                <View className={styles.menuArrow}>
                  <Image
                    src={images.ICON_ARROW_RIGHT_WHITE}
                    className={styles.img}
                  />
                </View>
              </View>
              <Text className={styles.menuDesc}>
                识别文本/图片，快速导入球局信息
              </Text>
            </View>

            <View className={styles.menuIcon}>
              <Image src={images.ICON_IMPORTANT_BTN} />
            </View>
          </View>
        </View>
      )}

      {/* 绿色圆形按钮 */}
      <View
        className={`${styles.greenButton} ${isVisible ? styles.rotated : ""}`}
        onClick={handleIconClick}
      >
        <Image src={images.ICON_PUBLISH} className={styles.closeIcon} />
      </View>

      {/* AI导入弹窗 */}
      <AiImportPopup
        visible={aiImportVisible}
        onClose={handleAiImportClose}
        onManualPublish={handleManualPublish}
      />
    </View>
  );
};

export default PublishMenu;