import { useEffect } from "react";
import { View, Text } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import { redirectTo } from "@/utils/navigation";
import { useReddotInfo, useFetchReddotInfo } from "@/store/messageStore";
import "./index.scss";
import PublishMenu from "../PublishMenu";
export type currentPageType = "games" | "message" | "personal";

const GuideBar = (props) => {
  const { currentPage, guideBarClassName, onPublishMenuVisibleChange, onTabChange } = props;
  const reddotInfo = useReddotInfo();
  const fetchReddotInfo = useFetchReddotInfo();

  useEffect(() => {
    fetchReddotInfo();
  }, []);

  // 每次页面显示时刷新红点状态
  useDidShow(() => {
    fetchReddotInfo();
  });

  const guideItems = [
    {
      code: "list",
      text: "球局",
    },
    {
      code: "message",
      text: "消息",
    },
    {
      code: "personal",
      text: "我的",
    },
  ];

  const handlePageChange = (code: string) => {
    if (code === currentPage) {
      return;
    }

    // 如果提供了 onTabChange 回调，优先使用（单页面模式）
    if (onTabChange) {
      onTabChange(code);
      return;
    }

    
  };

  return (
    <View className="guide-bar-container">
      <View className={`guide-bar ${guideBarClassName}`}>
        {/* guide area on the left */}
        <View className="guide-bar-pages">
          {guideItems.map((item) => (
            <View
              className={`guide-bar-pages-item ${currentPage === item.code ? "guide-bar-pages-item-active" : ""}`}
              onClick={() => handlePageChange(item.code)}
              key={item.code}
            >
              <Text>{item.text}</Text>
              {item.code === "message" && reddotInfo?.has_reddot && (
                <View className="reddot"></View>
              )}
            </View>
          ))}
        </View>
        {/* publish button on the right */}
        {/* <View className='guide-bar-publish' onClick={handlePublish}>
          <Image className='guide-bar-publish-icon' src={img.ICON_GUIDE_BAR_PUBLISH} />
        </View> */}
        <PublishMenu onVisibleChange={onPublishMenuVisibleChange} />
      </View>
    </View>
  );
};

export default GuideBar;