import React, { useState } from "react";
import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import img from "@/config/images";
import "./index.scss";
import PublishMenu from "../PublishMenu";
export type currentPageType = "games" | "message" | "personal";

const GuideBar = (props) => {
  const { currentPage } = props;

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

  const handlePublish = () => {
    Taro.navigateTo({
      url: "/publish_pages/publishBall/index",
    });
  };

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

    let url = `/pages/${code}/index`;
    if (code === "personal") {
      url = "/user_pages/myself/index";
    }
    if (code === "message") {
      url = "/other_pages/message/index";
    }
    if (code === "list") {
      url = "/game_pages/list/index"
    }
    Taro.redirectTo({
      url: url,
    }).then(() => {
      Taro.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    });
  };

  return (
    <View className="guide-bar-container">
      <View className="guide-bar">
        {/* 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)}
            >
              <Text>{item.text}</Text>
            </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 />
      </View>
    </View>
  );
};

export default GuideBar;