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

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

interface Props {
  transportTypes: TransportType;
  setTransportTypes: (val: TransportType) => void;
  reys: string;
  data: PacketsData;
  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 scale = screenWidth < 360 ? 0.85 : 1;

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

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

      {open && (
        <View style={styles.dropdown}>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginBottom: 10,
            }}
          >
            <Text style={styles.sectionTitle}>{t('Transport')}</Text>
            <TouchableOpacity onPress={() => setOpen(false)}>
              <CloseIcon />
            </TouchableOpacity>
          </View>
          <View style={styles.typeList}>
            {transportTypes.map(type => (
              <TouchableOpacity
                key={type}
                style={[
                  styles.typeButton,
                  selectedType === type && styles.activeType,
                ]}
                onPress={() => {
                  setTransportTypes(type);
                  setOpen(false);
                }}
              >
                <Text
                  style={[
                    styles.typeText,
                    selectedType === type && styles.activeTypeText,
                  ]}
                >
                  {
                    // type === 'all'
                    //   ? t('Barchasi')
                    //   :
                    type === 'AUTO' ? t('Avto') : t('Avia')
                  }
                </Text>
              </TouchableOpacity>
            ))}
          </View>
          <Text style={styles.sectionTitle}>{t('Reys raqami')}</Text>
          <View style={styles.flightList}>
            <TouchableOpacity
              style={[
                styles.flightButton,
                selectedFlight === 'all' && styles.activeFlight,
              ]}
              onPress={() => {
                setReys('all');
                setSelectedData(null);
                setOpen(false);
              }}
            >
              <Text
                style={[
                  styles.flightText,
                  selectedFlight === 'all' && styles.activeFlightText,
                ]}
              >
                {t('Barchasi')}
              </Text>
            </TouchableOpacity>
            {newOrders.map(item => (
              <TouchableOpacity
                key={item.id}
                style={[
                  styles.flightButton,
                  selectedFlight === item.packetName && styles.activeFlight,
                ]}
                onPress={() => {
                  setReys(item.packetName);
                  setSelectedData(item);
                  setOpen(false);
                }}
              >
                <Text
                  style={[
                    styles.flightText,
                    selectedFlight === item.packetName &&
                      styles.activeFlightText,
                  ]}
                >
                  {item.packetName}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      )}
    </View>
  );
};
const makeStyles = (scale: number) =>
  StyleSheet.create({
    container: {
      height: 'auto',
      borderRadius: 8 * scale,
      alignItems: 'flex-end',
      justifyContent: 'flex-start',
      position: 'relative',
      zIndex: 10,
    },
    card: {
      paddingHorizontal: 12 * scale,
      height: 40 * scale,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#D8DADC',
      borderRadius: 8 * scale,
      flexDirection: 'row',
      gap: 4 * scale,
    },
    text: {
      color: '#000000',
      fontWeight: '500',
      fontSize: 14 * scale,
    },
    dropdown: {
      position: 'absolute',
      top: 50 * scale,
      right: 0,
      backgroundColor: '#fff',
      borderRadius: 8 * scale,
      paddingVertical: 8 * scale,
      paddingHorizontal: 10 * scale,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.2,
      shadowRadius: 4,
      elevation: 5,
      zIndex: 10,
      minWidth: 200 * scale,
    },

    sectionTitle: {
      fontWeight: '600',
      marginBottom: 6 * scale,
      color: '#333',
      fontSize: 16 * scale,
    },
    typeList: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: 8 * scale,
      marginBottom: 12 * scale,
    },
    typeButton: {
      backgroundColor: '#F3FAFF',
      paddingHorizontal: 5 * scale,
      paddingVertical: 6 * scale,
      borderRadius: 6 * scale,
    },
    activeType: {
      backgroundColor: '#28A7E8',
    },
    typeText: {
      color: '#28A7E8',
      fontWeight: '500',
      fontSize: 14 * scale,
    },
    activeTypeText: {
      color: '#fff',
    },
    flightList: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: 8 * scale,
      marginBottom: 12 * scale,
    },
    flightButton: {
      backgroundColor: '#F3FAFF',
      paddingHorizontal: 10 * scale,
      paddingVertical: 6 * scale,
      borderRadius: 6 * scale,
    },
    activeFlight: {
      backgroundColor: '#28A7E8',
    },
    flightText: {
      color: '#28A7E8',
      fontWeight: '500',
      fontSize: 14 * scale,
    },
    activeFlightText: {
      color: '#fff',
    },
  });

export default Filter;
