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

const paymentStatuses = [
  { label: "To'lanmagan", value: 'NEW' },
  { label: 'Kutilmoqda', value: 'PENDING' },
  { label: "To'langan", value: 'PAYED' },
  { label: 'Bekor qilingan', value: 'CANCELLED' },
];

interface Props {
  paymentStatus: string;
  setPaymentStatus: (val: string) => void;
}

const PaymentFilter = ({ paymentStatus, setPaymentStatus }: Props) => {
  const [open, setOpen] = useState(false);
  const { t } = useTranslation();

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

      {open && (
        <View style={styles.dropdown}>
          <View style={styles.dropdownHeader}>
            <AppText style={styles.sectionTitle}>{t("To'lov holati")}</AppText>
            <TouchableOpacity onPress={() => setOpen(false)}>
              <CloseIcon />
            </TouchableOpacity>
          </View>

          <FlatList
            data={paymentStatuses}
            keyExtractor={item => item.value}
            scrollEnabled={false}
            contentContainerStyle={{ gap: 8 }}
            renderItem={({ item }) => (
              <TouchableOpacity
                style={[
                  styles.statusButton,
                  paymentStatus === item.value && styles.activeStatus,
                ]}
                onPress={() => {
                  setPaymentStatus(item.value);
                  setOpen(false);
                }}
              >
                <AppText
                  style={[
                    styles.statusText,
                    paymentStatus === item.value && styles.activeStatusText,
                  ]}
                >
                  {t(item.label)}
                </AppText>
              </TouchableOpacity>
            )}
          />
        </View>
      )}
    </View>
  );
};

const styles = 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,
  },
  statusButton: {
    flex: 1,
    backgroundColor: '#F3FAFF',
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 6,
  },
  activeStatus: {
    backgroundColor: '#28A7E8',
  },
  statusText: {
    color: '#28A7E8',
    fontWeight: '500',
    fontSize: 14,
    textAlign: 'center',
  },
  activeStatusText: {
    color: '#fff',
  },
});

export default PaymentFilter;
