import React, { useEffect } from "react";
import { View, Text } from "@tarojs/components";
import { useGlobalState } from "@/store/global";
import "./index.scss";

interface LocationConfirmDialogProps {
  visible: boolean;
  currentCity: string; // 缓存的城市
  detectedCity: string; // 定位的城市
  onConfirm: () => void;
  onCancel: () => void;
}

const LocationConfirmDialog: React.FC<LocationConfirmDialogProps> = ({
  visible,
  currentCity,
  detectedCity,
  onConfirm,
  onCancel,
}) => {
  const { setShowGuideBar } = useGlobalState();

  // 当弹窗显示/隐藏时，控制 GuideBar
  useEffect(() => {
    console.log('[LocationConfirmDialog] visible 变化:', visible);
    if (visible) {
      console.log('[LocationConfirmDialog] 弹窗显示，隐藏 GuideBar');
      setShowGuideBar(false);
    } else {
      console.log('[LocationConfirmDialog] 弹窗隐藏，显示 GuideBar');
      setShowGuideBar(true);
    }
  }, [visible, setShowGuideBar]);

  if (!visible) return null;

  return (
    <View className="locationDialogMask" onClick={onCancel}>
      <View className="locationDialogContainer" onClick={(e) => e.stopPropagation()}>
        <View className="locationDialogContent">
          <Text className="locationDialogTitle">定位显示您在{detectedCity}</Text>
          <View className="locationDialogButtons">
            <View 
              className="locationDialogButton primary" 
              onClick={(e) => {
                e.stopPropagation();
                onConfirm();
              }}
            >
              <Text className="locationDialogButtonText primary">切换到{detectedCity}</Text>
            </View>
            <View 
              className="locationDialogButton secondary" 
              onClick={(e) => {
                e.stopPropagation();
                onCancel();
              }}
            >
              <Text className="locationDialogButtonText secondary">继续浏览{currentCity}</Text>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};

export default LocationConfirmDialog;