import { useState } from 'react';
import { mount } from '../../shared/mount';
import { EventList, Filters, Shell } from '../../shared/components';
import { filterEvents, toggleSaved } from '../../shared/domain';
import type { CategoryFilter } from '../../shared/domain';
import { events } from '../../shared/fixtures';

function App() {
  const [query, setQuery] = useState('');
  const [category, setCategory] = useState<CategoryFilter>('all');
  const [savedIds, setSavedIds] = useState<string[]>([]);
  const [onlySaved, setOnlySaved] = useState(false);
  const pool = onlySaved ? events.filter(event => savedIds.includes(event.id)) : events;
  const visible = filterEvents(pool, query, category);
  return <Shell title="Save by stable identity">
    <Filters query={query} category={category} onQuery={setQuery} onCategory={setCategory} />
    <label><input type="checkbox" style={{ width: 'auto' }} checked={onlySaved}
      onChange={event => setOnlySaved(event.currentTarget.checked)} /> Show only saved events</label>
    <EventList events={visible} savedIds={savedIds}
      onToggle={id => {
        setSavedIds(previous => toggleSaved(previous, id));
        if (onlySaved) document.getElementById('screen-title')?.focus();
      }} />
  </Shell>;
}
mount(<App />);