import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import { getStyles } from './providerListScreen.styles';
import { ProviderCard, Header } from '@components';
import { useAppTheme } from '@theme';
import { deliveryService } from '../../../services/deliveryService';
import { Provider } from '../../../interfaces';

const FILTERS = ['Filters', 'Rating 4.0+', 'Fast Delivery'];

export const ProviderListScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const [providers, setProviders] = useState<Provider[]>([]);
  const [activeFilter, setActiveFilter] = useState<string | null>(null);

  useEffect(() => {
    deliveryService.getProviders().then(setProviders);
  }, []);

  return (
    <View style={styles.container}>
      <Header title="Providers" onBack={() => {}} />
      <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.filterRow}>
        {FILTERS.map((filter) => (
          <TouchableOpacity
            key={filter}
            style={[
              styles.filterChip,
              activeFilter === filter && styles.filterChipActive,
            ]}
            onPress={() => setActiveFilter(activeFilter === filter ? null : filter)}
            activeOpacity={0.7}
          >
            <Text
              style={[
                styles.filterChipText,
                activeFilter === filter && styles.filterChipTextActive,
              ]}
            >
              {filter}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
      <FlatList
        data={providers}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <ProviderCard
            imageUrl={item.imageUrl}
            name={item.name}
            rating={item.rating}
            deliveryTime={item.deliveryTime}
            tag={item.tag}
            discountText={item.discountText}
          />
        )}
        contentContainerStyle={styles.list}
      />
    </View>
  );
};