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: '/pages/publishBall/index',
    })
  }

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

    let url = `/pages/${code}/index`
    if (code === 'personal') {
      url = '/pages/userInfo/myself/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