import AppText from 'components/AppText';
import { Dispatch, SetStateAction, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Image, TouchableOpacity, 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 { t } = useTranslation();
  const styles = useMemo(() => HomeStyle(), []);

  const gradientStyle = useMemo(
    () => ({
      flex: 1,
      borderRadius: 8,
      flexDirection: 'row' as const,
      alignItems: 'center' as const,
      height: 80,
    }),
    [],
  );

  // Tabs data
  const tabsData = useMemo(
    () => [
      {
        type: 'AVIA' as const,
        label: t('Avia orqali yetkazish'),
        logo: AviaLogo,
      },
      {
        type: 'AUTO' as const,
        label: t('Avto orqali yetkazish'),
        logo: AutoLogo,
      },
    ],
    [t],
  );

  return (
    <View style={{ flexDirection: 'row', paddingHorizontal: 10, gap: 12 }}>
      {tabsData.map(item => {
        const isActive = activeTab === item.type;
        const gradientColors = isActive
          ? ['#28A7E8', '#28A7E8']
          : ['#28a8e82d', '#28A7E8'];

        return (
          <TouchableOpacity
            onPress={() => setActiveTab(item.type)}
            style={{ flex: 1 }}
          >
            <LinearGradient
              colors={gradientColors}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 0 }}
              style={gradientStyle}
            >
              <Image source={item.logo} style={styles.tabsLogo} />
              <AppText
                style={[styles.tabsText, { color: isActive ? '#fff' : '#000' }]}
              >
                {item.label}
              </AppText>
            </LinearGradient>
          </TouchableOpacity>
        );
      })}
    </View>
    // <FlatList
    //   data={tabsData}
    //   numColumns={2}
    //   keyExtractor={(_, idx) => idx.toString()}
    //   renderItem={renderItem}
    //   showsHorizontalScrollIndicator={false}
    //   scrollEnabled={false}
    //   columnWrapperStyle={{
    //     gap: 8,
    //   }}
    //   contentContainerStyle={{
    //     paddingHorizontal: (screenWidth - cardWidth) / 2,
    //   }}
    //   getItemLayout={(_, index) => ({
    //     length: cardWidth,
    //     offset: cardWidth * index,
    //     index,
    //   })}
    // />
  );
};

export default Tabs;
