import React from 'react';
import { StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
import { SearchSortOption } from '@/types/feed';
import { ThemedText } from './themed-text';
import { ThemedView } from './themed-view';
import { Colors, Spacing } from '@/constants/theme';
import { useColorScheme } from 'react-native';

const SORT_OPTIONS: { value: SearchSortOption; label: string; icon: string }[] = [
  { value: 'relevance', label: 'Relevance', icon: '⭐' },
  { value: 'date_desc', label: 'Newest', icon: '📅' },
  { value: 'date_asc', label: 'Oldest', icon: '🕐' },
  { value: 'title_asc', label: 'A-Z', icon: '🔤' },
  { value: 'title_desc', label: 'Z-A', icon: '🔡' },
  { value: 'feed_asc', label: 'Feed A-Z', icon: '📰' },
  { value: 'feed_desc', label: 'Feed Z-A', icon: '📰' },
];

interface SearchSortProps {
  sort: SearchSortOption;
  onSortChange: (sort: SearchSortOption) => void;
}

export function SearchSort({ sort, onSortChange }: SearchSortProps) {
  const scheme = useColorScheme();
  const colors = Colors[scheme === 'unspecified' ? 'light' : scheme];

  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.container}
    >
      {SORT_OPTIONS.map((option) => {
        const isActive = sort === option.value;
        return (
          <TouchableOpacity
            key={option.value}
            style={[
              styles.button,
              isActive && { backgroundColor: '#007AFF' }
            ]}
            onPress={() => onSortChange(option.value)}
            activeOpacity={0.7}
          >
            <ThemedText 
              style={[
                styles.buttonText,
                isActive && styles.activeButtonText
              ]}
            >
              {option.icon} {option.label}
            </ThemedText>
          </TouchableOpacity>
        );
      })}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: Spacing.three,
    paddingVertical: Spacing.two,
    gap: Spacing.two,
  },
  button: {
    paddingHorizontal: Spacing.three,
    paddingVertical: Spacing.two,
    borderRadius: Spacing.two,
    backgroundColor: '#e5e5ea',
    minWidth: 80,
    alignItems: 'center',
  },
  buttonText: {
    fontSize: 14,
    color: '#8e8e93',
  },
  activeButtonText: {
    color: '#ffffff',
  },
});
