import { Tabs } from 'expo-router'
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
import { LinearGradient } from 'expo-linear-gradient'
import { useTranslation } from 'react-i18next'

import { HomeIcon, MessageIcon, MyIcon, VideoIcon } from '@/components/icon'

export default function TabLayout() {
  const { t } = useTranslation()
  
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: '#FFFFFF',
        tabBarInactiveTintColor: '#FFFFFF',
        headerShown: false,
        tabBarHideOnKeyboard: true,
        tabBarShowLabel: true,
        tabBarStyle: {
          backgroundColor: '#1C1E22CC',
          height: 83,
          paddingTop: 4,
          paddingBottom: 4,
          paddingLeft: 4,
          paddingRight: 4,
          borderTopWidth: 0,
        },
        tabBarLabelStyle: {
          color: '#FFFFFF',
          fontSize: 10,
          fontWeight: '400',
        },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: t('tabs.home'),
          tabBarLabel: ({ focused }: { focused: boolean }) => (focused ? null : <Text style={styles.tabLabel}>{t('tabs.home')}</Text>),
          tabBarIcon: ({ focused }: { focused: boolean }) => {
            if (focused) {
              return (
                <LinearGradient colors={['#9966FF', '#FF6699', '#FF9966']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.iconContainer}>
                  <HomeIcon />
                </LinearGradient>
              )
            }
            return (
              <View style={{ opacity: 0.6 }}>
                <HomeIcon />
              </View>
            )
          },
        }}
      />
      <Tabs.Screen
        name="video"
        options={{
          title: t('tabs.video'),
          tabBarLabel: ({ focused }: { focused: boolean }) => (focused ? null : <Text style={styles.tabLabel}>{t('tabs.video')}</Text>),
          tabBarIcon: ({ focused }: { focused: boolean }) => {
            if (focused) {
              return (
                <LinearGradient colors={['#9966FF', '#FF6699', '#FF9966']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.iconContainer}>
                  <VideoIcon />
                </LinearGradient>
              )
            }
            return (
              <View style={{ opacity: 0.6 }}>
                <VideoIcon />
              </View>
            )
          },
        }}
      />
      <Tabs.Screen
        name="message"
        options={{
          title: t('tabs.message'),
          tabBarLabel: ({ focused }: { focused: boolean }) => (focused ? null : <Text style={styles.tabLabel}>{t('tabs.message')}</Text>),
          tabBarIcon: ({ focused }: { focused: boolean }) => {
            if (focused) {
              return (
                <LinearGradient colors={['#9966FF', '#FF6699', '#FF9966']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.iconContainer}>
                  <MessageIcon />
                </LinearGradient>
              )
            }
            return (
              <View style={{ opacity: focused ? 1 : 0.6 }}>
                <MessageIcon />
              </View>
            )
          },
        }}
      />
      <Tabs.Screen
        name="my"
        options={{
          title: t('tabs.my'),
          tabBarLabel: ({ focused }: { focused: boolean }) => (focused ? null : <Text style={styles.tabLabel}>{t('tabs.my')}</Text>),
          tabBarIcon: ({ focused }: { focused: boolean }) => {
            if (focused) {
              return (
                <LinearGradient colors={['#9966FF', '#FF6699', '#FF9966']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.iconContainer}>
                  <MyIcon />
                </LinearGradient>
              )
            }
            return (
              <View style={{ opacity: focused ? 1 : 0.6 }}>
                <MyIcon />
              </View>
            )
          },
        }}
      />
    </Tabs>
  )
}

const styles = StyleSheet.create({
  iconContainer: {
    width: 87,
    height: 41,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 100,
  },
  tabLabel: {
    fontSize: 10,
    color: '#FFFFFF',
    textAlign: 'center',
  },
})