import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import type { Exchange, SymbolFilter } from '../types';
import { MultiSelect } from './MultiSelect';

interface SymbolsFilterProps {
  filters: SymbolFilter;
  exchanges: Exchange[];
  onFiltersChange: (filters: SymbolFilter) => void;
}

export function SymbolsFilter({ filters, exchanges, onFiltersChange }: SymbolsFilterProps) {
  const handleExchangeChange = (exchange: string) => {
    onFiltersChange({
      ...filters,
      exchange: exchange === 'all' ? undefined : exchange,
    });
  };

  const handleSearchChange = (searchText: string) => {
    onFiltersChange({
      ...filters,
      searchText: searchText.trim() || undefined,
    });
  };

  const handleCountryChange = (countries: string[]) => {
    onFiltersChange({
      ...filters,
      country: countries.length > 0 ? countries : undefined,
    });
  };

  const countryOptions = [
    { value: 'CA', label: 'Canada' },
    { value: 'US', label: 'United States' },
  ];

  return (
    <div className="flex items-center gap-2 flex-1">
      {/* Exchange Dropdown */}
      <select
        value={filters.exchange || 'all'}
        onChange={(e) => handleExchangeChange(e.target.value)}
        className="rounded-md bg-background border border-border px-2 py-1 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
      >
        <option value="all">All Exchanges</option>
        {exchanges.map((exchange) => (
          <option key={exchange.code} value={exchange.code}>
            {exchange.code}
          </option>
        ))}
      </select>

      {/* Symbol Search */}
      <div className="relative flex-1 max-w-xs">
        <div className="absolute inset-y-0 left-0 pl-2 flex items-center pointer-events-none">
          <MagnifyingGlassIcon className="h-3.5 w-3.5 text-text-secondary" />
        </div>
        <input
          type="text"
          placeholder="Search..."
          value={filters.searchText || ''}
          onChange={(e) => handleSearchChange(e.target.value)}
          className="w-full pl-8 pr-2 py-1 rounded-md bg-background border border-border text-sm text-text-primary placeholder-text-secondary focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
        />
      </div>

      {/* Country Filter */}
      <div className="w-40">
        <MultiSelect
          options={countryOptions}
          selected={filters.country || ['CA', 'US']}
          onChange={handleCountryChange}
          placeholder="Countries"
          className="text-sm"
        />
      </div>
    </div>
  );
}