import { useSearchParams } from 'react-router-dom';
import type { MediaFilters } from './filters.js';
import { initialMediaFilters, MediaPage } from './media-page.js';

function parseType(value: string | null): MediaFilters['type'] {
  return value === 'image' || value === 'gif' ? value : 'all';
}

function parseDateRange(value: string | null): MediaFilters['dateRange'] {
  return value === '24h' || value === '7d' || value === '30d' ? value : 'all';
}

export function MediaRoute() {
  const [searchParams, setSearchParams] = useSearchParams();
  const filters: MediaFilters = {
    conversation: searchParams.get('conversation') ?? initialMediaFilters.conversation,
    sender: searchParams.get('sender') ?? initialMediaFilters.sender,
    type: parseType(searchParams.get('type')),
    dateRange: parseDateRange(searchParams.get('range')),
  };

  function updateFilters(next: MediaFilters) {
    const params = new URLSearchParams();
    if (next.conversation !== 'all') params.set('conversation', next.conversation);
    if (next.sender !== 'all') params.set('sender', next.sender);
    if (next.type !== 'all') params.set('type', next.type);
    if (next.dateRange !== 'all') params.set('range', next.dateRange);
    setSearchParams(params, { replace: true });
  }

  return <MediaPage filters={filters} onFiltersChange={updateFilters} />;
}