import Taro from '@tarojs/taro'
import { Button, Image, Text, View } from '@tarojs/components'
import spirit from '../assets/home/spirit.png'
import './AppTabBar.scss'

export function AppTabBar({ active }: { active: 'home' | 'my' }) {
  const navigate = (page: 'home' | 'my') => {
    if (page === active) return
    const url = `/pages/${page}/index`
    if (process.env.TARO_ENV === 'weapp') Taro.switchTab({ url })
    else Taro.redirectTo({ url })
  }
  return <View className='app-tabbar'>
    <Button className={`app-tabbar-item ${active === 'home' ? 'active' : ''}`} onClick={() => navigate('home')}>
      <View className='app-home-symbol'><View className='app-home-roof' /><View className='app-home-body'><View /></View></View>
      <Text className='app-tabbar-label'>首页</Text>
    </Button>
    <Button className='app-tabbar-realm' onClick={() => Taro.navigateTo({ url: '/pages/fortune/index' })}>
      <View className='app-realm-symbol'><View className='app-spirit-frame'><Image className='app-spirit-image' src={spirit} mode='aspectFit' /></View></View>
      <Text className='app-tabbar-label'>天宫</Text>
    </Button>
    <Button className={`app-tabbar-item ${active === 'my' ? 'active' : ''}`} onClick={() => navigate('my')}>
      <View className='app-person-symbol'><View className='app-person-head' /><View className='app-person-body' /></View>
      <Text className='app-tabbar-label'>我的</Text>
    </Button>
  </View>
}