import React from 'react'
import { Tabs } from 'expo-router'
import { Ionicons } from '@expo/vector-icons'

import Colors from '@/constants/Colors'
import { useColorScheme } from '@/components/useColorScheme'
import { useClientOnlyValue } from '@/components/useClientOnlyValue'

export default function TabLayout() {
  const colorScheme = useColorScheme()

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme].tint,
        tabBarStyle: {
          backgroundColor: colorScheme === 'dark' ? '#1b1f28' : '#fff',
          borderTopColor: 'rgba(255,255,255,0.08)',
        },
        headerStyle: {
          backgroundColor: colorScheme === 'dark' ? '#1b1f28' : '#fff',
        },
        headerTintColor: Colors[colorScheme].text,
        headerShown: useClientOnlyValue(false, true),
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: '直播',
          tabBarIcon: ({ color }) => <Ionicons name="radio-outline" size={22} color={color} />,
        }}
      />
      <Tabs.Screen
        name="desk"
        options={{
          title: '仪表盘',
          tabBarIcon: ({ color }) => <Ionicons name="grid-outline" size={22} color={color} />,
        }}
      />
      <Tabs.Screen
        name="network"
        options={{
          title: '网络',
          tabBarIcon: ({ color }) => <Ionicons name="wifi-outline" size={22} color={color} />,
        }}
      />
      <Tabs.Screen
        name="bind"
        options={{
          title: '远程',
          tabBarIcon: ({ color }) => <Ionicons name="phone-portrait-outline" size={22} color={color} />,
        }}
      />
      <Tabs.Screen
        name="system"
        options={{
          title: '系统',
          tabBarIcon: ({ color }) => <Ionicons name="speedometer-outline" size={22} color={color} />,
        }}
      />
      <Tabs.Screen
        name="wechat"
        options={{
          href: null,
          title: '微信',
          tabBarIcon: ({ color }) => <Ionicons name="chatbubbles-outline" size={22} color={color} />,
        }}
      />
    </Tabs>
  )
}
