import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  ProvidersStep,
  EMPTY_FILTER_VALUES,
  type ProviderFilterValues,
  type ProviderSortBy,
  type ListViewMode,
} from '../../../../components/pages/ProvidersStep';
import { ProviderMap } from '../../../../components/organisms/ProviderMap';
import { providers } from '../../../shared/fixtures/providers';
import { demoNav } from '../DemoNav';

export function ProvidersRoute() {
  const navigate = useNavigate();
  const [query, setQuery] = useState('');
  const [filters, setFilters] = useState<ProviderFilterValues>(EMPTY_FILTER_VALUES);
  const [sort, setSort] = useState<ProviderSortBy>('recommended');
  const [view, setView] = useState<ListViewMode>('list');

  const filtered = providers.filter((p) => p.location.toLowerCase().includes(query.toLowerCase()));

  return (
    <ProvidersStep
      providers={filtered}
      onSelectProvider={(id) => navigate(`/providers/${id}/packages`)}
      searchQuery={query}
      onSearchChange={setQuery}
      filterValues={filters}
      onFilterChange={setFilters}
      sortBy={sort}
      onSortChange={setSort}
      viewMode={view}
      onViewModeChange={setView}
      onBack={() => window.history.back()}
      navigation={demoNav}
      mapPanel={
        <ProviderMap
          providers={filtered}
          onSelectProvider={(id) => navigate(`/providers/${id}/packages`)}
        />
      }
    />
  );
}