import { ColorsStatus } from '@/constants/ColorsStatus';
import Styles from '@/constants/Styles';
import { AntDesign, Feather, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
import { TabTriggerSlotProps } from 'expo-router/ui';
import { ComponentProps, Ref } from 'react';
import { Pressable, View } from 'react-native';
import Text from './Text';

type Feather = ComponentProps<typeof Feather>['name'];
type Ionicons = ComponentProps<typeof Ionicons>['name'];
type AntDesign = ComponentProps<typeof AntDesign>['name'];
type MaterialCommunityIcons = ComponentProps<typeof MaterialCommunityIcons>['name'];

export type TabButtonProps = TabTriggerSlotProps & {
   iconType: 'Feather' | 'Ionicons' | 'AntDesign' | 'MaterialCommunityIcons';
   iconF?: Feather
   iconI?: Ionicons
   iconA?: AntDesign
   iconM?: MaterialCommunityIcons
   ref: Ref<View>;
   n: number
};

export function ButtonTabExpo({ iconType, iconF, iconI, iconA, iconM, children, isFocused, n, ...props }: TabButtonProps) {
   return (
      <Pressable
         {...props}
         style={[Styles.btnTab, (isFocused) && ColorsStatus.orange, { width: n == 2 ? '50%' : 'auto' }]}>
         {iconType == 'Feather' && <Feather name={iconF} color={isFocused == false ? 'black' : 'white'} size={20} />}
         {iconType == 'Ionicons' && <Ionicons name={iconI} color={isFocused == false ? 'black' : 'white'} size={20} />}
         {iconType == 'AntDesign' && <AntDesign name={iconA} color={isFocused == false ? 'black' : 'white'} size={20} />}
         {iconType == 'MaterialCommunityIcons' && <MaterialCommunityIcons name={iconM} color={isFocused == false ? 'black' : 'white'} size={20} />}
         <Text style={[Styles.textMediumSemiBold, Styles.ml10, { color: isFocused ? 'white' : 'black' }]}>{children}</Text>
      </Pressable>
   );
}