import { SortAsc, SortDesc, ArrowUpDown } from 'lucide-react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Button } from '@/components/ui/button';

export interface SortOption {
  field: string;
  direction: 'asc' | 'desc';
}

interface SearchSortOptionsProps {
  sort: SortOption;
  onSortChange: (sort: SortOption) => void;
  activeTab: string;
}

export function SearchSortOptions({ sort, onSortChange, activeTab }: SearchSortOptionsProps) {
  const getSortOptions = () => {
    const commonOptions = [
      { value: 'relevance', label: 'Relevance' },
      { value: 'name', label: 'Name' },
      { value: 'rating', label: 'Rating' },
      { value: 'reviews', label: 'Review Count' },
    ];

    const parkOptions = [
      ...commonOptions,
      { value: 'rides', label: 'Ride Count' },
      { value: 'coasters', label: 'Coaster Count' },
      { value: 'opening', label: 'Opening Date' },
    ];

    const rideOptions = [
      ...commonOptions,
      { value: 'height', label: 'Height' },
      { value: 'speed', label: 'Speed' },
      { value: 'opening', label: 'Opening Date' },
      { value: 'intensity', label: 'Intensity' },
    ];

    const companyOptions = [
      ...commonOptions.filter(opt => opt.value !== 'rating'), // Companies might not have ratings
      { value: 'founded', label: 'Founded Year' },
      { value: 'parks', label: 'Parks Count' },
      { value: 'rides', label: 'Rides Count' },
    ];

    switch (activeTab) {
      case 'park':
        return parkOptions;
      case 'ride':
        return rideOptions;
      case 'company':
        return companyOptions;
      default:
        return commonOptions;
    }
  };

  const toggleDirection = () => {
    onSortChange({
      ...sort,
      direction: sort.direction === 'asc' ? 'desc' : 'asc'
    });
  };

  return (
    <div className="flex items-center gap-2">
      <Select 
        value={sort.field} 
        onValueChange={(field) => onSortChange({ ...sort, field })}
      >
        <SelectTrigger className="w-48 bg-muted/50 border-border/50">
          <ArrowUpDown className="w-4 h-4 mr-2" />
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {getSortOptions().map(option => (
            <SelectItem key={option.value} value={option.value}>
              Sort by {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <Button
        variant="outline"
        size="icon"
        onClick={toggleDirection}
        className="shrink-0 bg-muted/50 border-border/50"
      >
        {sort.direction === 'asc' ? (
          <SortAsc className="w-4 h-4" />
        ) : (
          <SortDesc className="w-4 h-4" />
        )}
      </Button>
    </div>
  );
}