import { View, Text } from '@tarojs/components'
import './index.scss'
import { useTranslation } from 'react-i18next'
import Taro from '@tarojs/taro'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { changeTabbar } from '@/store/common'

export default function TabBar() {
    const { t } = useTranslation()
    const common = useSelector((state: any) => state.common);
    const [selIndex, setSelIndex] = useState(common.pageIndex)
    const dispatch = useDispatch();
    // useEffect(() => {
    //     console.log('aaa',global.index)
    //     setSelIndex(global.index?global.index:0)
    //   }, [global.index])
    // useEffect(()=>{
    //     console.log('page 初始化')
    // },[])

    useEffect(()=>{
        setSelIndex(common.pageIndex)
    },[common.pageIndex])

    function switchTab(index: number) {
        // console.log(index,common.showTabbar)
        if (!common.showTabbar){
            return
        }
        // global.index = index;

        // console.log(index,'apple')
        // console.log(global.index)
        dispatch(changeTabbar(index))
        

        switch (index) {
            case 0:

                Taro.switchTab({
                    url: '/pages/clock/ClockMain'
                })
                break;
            case 1:
                Taro.switchTab({
                    url: '/pages/metric/Metric'
                })
                break;
            case 2:

                Taro.switchTab({
                    url: '/pages/activity/Activity'
                })
                break;
            case 3:
                Taro.switchTab({
                    url: '/pages/account/Profile'
                })
                break;
        }
    }
    return (
        
        <View className='tabbar'>
            <View className={selIndex == 0 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(0)}>
                {/* <Text>{t('tabbar.clock')}</Text> */}
                <Text>生物钟</Text>
            </View>
            <View className={selIndex == 1 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(1)}>
                <Text>指标</Text>
                {/* <Text>{t('tabbar.metric')}</Text> */}
            </View>
            <View className={selIndex == 2 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(2)}>
                <Text>运动</Text>
                {/* <Text>{t('tabbar.activity')}</Text> */}
            </View>
            <View className={selIndex == 3 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(3)}>
                {/* <Text>{t('tabbar.more')}</Text> */}
                <Text>更多</Text>
            </View>
        </View>
    )
}