import { PacketsData } from 'api/packets';
import AppText from 'components/AppText';
import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  FlatList,
  StyleSheet,
  TouchableOpacity,
  View,
  useWindowDimensions,
} from 'react-native';
import CloseIcon from 'svg/Close';
import FilterIcon from 'svg/Filter';

const transportTypes = ['AVIA', 'AUTO'] as const;
type TransportType = (typeof transportTypes)[number];

interface Props {
  transportTypes: TransportType;
  setTransportTypes: (val: TransportType) => void;
  reys: string;
  data: PacketsData | undefined;
  setReys: (val: string) => void;
  setSelectedData: (val: any) => void;
}

const Filter = ({
  transportTypes: selectedType,
  setTransportTypes,
  data,
  reys: selectedFlight,
  setReys,
  setSelectedData,
}: Props) => {
  const [open, setOpen] = React.useState(false);
  const { width: screenWidth } = useWindowDimensions();
  const { t } = useTranslation();

  const styles = makeStyles();
  const newOrders = React.useMemo(
    () => data?.data?.filter(item => item.paymentStatus === 'NEW') || [],
    [data],
  );

  return (
    <View style={styles.container}>
      {/* Tugma */}
      <TouchableOpacity
        style={styles.card}
        onPress={() => setOpen(prev => !prev)}
      >
        <FilterIcon color="#000000" width={18} height={18} />
        <AppText style={styles.text}>{t('Filter')}</AppText>
      </TouchableOpacity>

      {open && (
        <View style={styles.dropdown}>
          {/* Header */}
          <View style={styles.dropdownHeader}>
            <AppText style={styles.sectionTitle}>{t('Transport')}</AppText>
            <TouchableOpacity onPress={() => setOpen(false)}>
              <CloseIcon />
            </TouchableOpacity>
          </View>

          {/* Transport Types -> FlatList */}
          <FlatList
            data={transportTypes}
            keyExtractor={item => item}
            numColumns={2}
            scrollEnabled={false}
            columnWrapperStyle={{ gap: 8 }}
            contentContainerStyle={{ gap: 8, marginBottom: 12 }}
            renderItem={({ item: type }) => (
              <TouchableOpacity
                style={[
                  styles.typeButton,
                  selectedType === type && styles.activeType,
                ]}
                onPress={() => {
                  setTransportTypes(type);
                  setOpen(false);
                }}
              >
                <AppText
                  style={[
                    styles.typeText,
                    selectedType === type && styles.activeTypeText,
                  ]}
                >
                  {type === 'AVIA' ? t('Avia') : t('Auto')}
                </AppText>
              </TouchableOpacity>
            )}
          />

          <AppText style={styles.sectionTitle}>{t('Reys raqami')}</AppText>
          <FlatList
            data={[{ id: 'all', packetName: 'all' }, ...newOrders]}
            keyExtractor={item => item.id?.toString() || 'all'}
            numColumns={1}
            scrollEnabled={false}
            contentContainerStyle={{ gap: 8 }} // faqat shu kifoya
            renderItem={({ item }) => (
              <TouchableOpacity
                style={[
                  styles.flightButton,
                  selectedFlight === item.packetName && styles.activeFlight,
                ]}
                onPress={() => {
                  setReys(item.packetName);
                  setSelectedData(item.id === 'all' ? null : item);
                  setOpen(false);
                }}
              >
                <AppText
                  style={[
                    styles.flightText,
                    selectedFlight === item.packetName &&
                      styles.activeFlightText,
                  ]}
                >
                  {item.packetName === 'all' ? t('Barchasi') : item.packetName}
                </AppText>
              </TouchableOpacity>
            )}
          />
        </View>
      )}
    </View>
  );
};

const makeStyles = () =>
  StyleSheet.create({
    container: {
      borderRadius: 8,
      alignItems: 'flex-end',
      position: 'relative',
      zIndex: 10,
    },
    card: {
      paddingHorizontal: 12,
      height: 40,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#D8DADC',
      borderRadius: 8,
      flexDirection: 'row',
      gap: 4,
    },
    text: {
      color: '#000000',
      fontWeight: '500',
      fontSize: 14,
    },
    dropdown: {
      position: 'absolute',
      top: 50,
      right: 0,
      backgroundColor: '#fff',
      borderRadius: 8,
      paddingVertical: 8,
      paddingHorizontal: 10,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.2,
      shadowRadius: 4,
      elevation: 5,
      zIndex: 10,
      minWidth: 200,
    },
    dropdownHeader: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginBottom: 10,
    },
    sectionTitle: {
      fontFamily: 'GolosText-Bold',
      marginBottom: 6,
      color: '#333',
      fontSize: 16,
    },
    typeButton: {
      flex: 1,
      backgroundColor: '#F3FAFF',
      paddingHorizontal: 5,
      paddingVertical: 6,
      borderRadius: 6,
    },
    activeType: {
      backgroundColor: '#28A7E8',
    },
    typeText: {
      color: '#28A7E8',
      fontWeight: '500',
      fontSize: 14,
      textAlign: 'center',
    },
    activeTypeText: {
      color: '#fff',
    },
    flightButton: {
      flex: 1,
      backgroundColor: '#F3FAFF',
      paddingHorizontal: 10,
      paddingVertical: 6,
      borderRadius: 6,
    },
    activeFlight: {
      backgroundColor: '#28A7E8',
    },
    flightText: {
      color: '#28A7E8',
      fontWeight: '500',
      fontSize: 14,
      textAlign: 'center',
    },
    activeFlightText: {
      color: '#fff',
    },
  });

export default Filter;
