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="bind"
        options={{
          title: '配对',
          tabBarIcon: ({ color }) => <Ionicons name="qr-code-outline" size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="index"
        options={{
          title: '录制',
          tabBarIcon: ({ color }) => <Ionicons name="radio-outline" size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="desk"
        options={{
          title: '工作台',
          tabBarIcon: ({ color }) => <Ionicons name="grid-outline" size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="network"
        options={{
          title: '网络',
          tabBarIcon: ({ color }) => <Ionicons name="wifi-outline" size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="more"
        options={{
          title: '更多',
          tabBarIcon: ({ color }) => <Ionicons name="menu-outline" size={24} color={color} />,
        }}
      />
    </Tabs>
  )
}