import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Image,
  Text,
  TouchableOpacity,
  useWindowDimensions,
  View,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import AviaLogo from 'screens/../../assets/bootsplash/Avia.png';
import AutoLogo from 'screens/../../assets/bootsplash/auto.png';
import { HomeStyle } from './styled';

interface Props {
  activeTab: string;
  setActiveTab: Dispatch<SetStateAction<'avia' | 'auto'>>;
}

const Tabs = ({ activeTab, setActiveTab }: Props) => {
  const { width: screenWidth } = useWindowDimensions();
  const { t } = useTranslation();
  const scale = useMemo(() => (screenWidth < 360 ? 0.85 : 1), [screenWidth]);

  const styles = useMemo(() => HomeStyle(scale), [scale]);

  const handleTabPress = useCallback(
    (type: 'avia' | 'auto') => {
      setActiveTab(type);
    },
    [setActiveTab],
  );

  const gradientStyle = useMemo(
    () => ({
      width: '100%' as const,
      borderRadius: 8,
      flexDirection: 'row' as const,
      alignItems: 'center' as const,
      paddingHorizontal: 12,
      height: 80,
      gap: 8,
    }),
    [],
  );

  const renderTabButton = useCallback(
    (type: 'avia' | 'auto', label: string, logo: any) => {
      const isActive = activeTab === type;

      const gradientColors = isActive
        ? ['#28A7E8', '#28A7E8']
        : ['#28a8e82d', '#28A7E8'];
      const textStyle = [
        styles.tabsText,
        { color: isActive ? '#fff' : '#000' },
      ];

      return (
        <TouchableOpacity
          onPress={() => handleTabPress(type)}
          style={styles.tabs}
          key={type}
        >
          <LinearGradient
            colors={gradientColors}
            start={{ x: 0.5, y: 1 }}
            end={{ x: 1.5, y: 1 }}
            style={gradientStyle}
          >
            <Image source={logo} style={styles.tabsLogo} />
            <Text style={textStyle}>{label}</Text>
          </LinearGradient>
        </TouchableOpacity>
      );
    },
    [activeTab, styles, handleTabPress, gradientStyle],
  );

  const tabButtons = useMemo(
    () => [
      renderTabButton('avia', t('Avia orqali yetkazish'), AviaLogo),
      renderTabButton('auto', t('Avto orqali yetkazish'), AutoLogo),
    ],
    [renderTabButton],
  );

  return <View style={styles.tabsContainer}>{tabButtons}</View>;
};

export default Tabs;
