import type { ReactNode } from 'react';
import { categories, isCategory } from './domain';
import type { CategoryFilter, CommunityEvent } from './domain';

export function Shell({ title, children }: { title: string; children: ReactNode }) {
  return <><a className="skip" href="#content" onClick={event => {
      event.preventDefault();
      document.getElementById('content')?.focus();
    }}>Skip to content</a>
    <header><p className="eyebrow">Harbor Together · fictional practice project</p>
      <a href="../../demos.html">All runnable checkpoints</a></header>
    <main id="content" tabIndex={-1}><h1 id="screen-title" tabIndex={-1}>{title}</h1>{children}</main>
    <footer>All events and participants are fictional. No real registration.</footer></>;
}

export function Filters({ query, category, onQuery, onCategory }: {
  query: string; category: CategoryFilter;
  onQuery: (query: string) => void; onCategory: (category: CategoryFilter) => void;
}) {
  return <div className="filters">
    <label>Search events<input type="search" value={query}
      onChange={event => onQuery(event.currentTarget.value)} /></label>
    <label>Category<select value={category} onChange={event => {
      const value = event.currentTarget.value;
      if (value === 'all' || isCategory(value)) onCategory(value);
    }}><option value="all">All categories</option>
      {categories.map(value => <option key={value} value={value}>{value}</option>)}
    </select></label>
    <button type="button" onClick={() => onQuery('')}>Clear search</button>
  </div>;
}

export function EventCard({ event, saved = false, onToggle, detailLink }: {
  event: CommunityEvent; saved?: boolean; onToggle?: (id: string) => void;
  detailLink?: ReactNode;
}) {
  return <article className="event-card">
    <p className="eyebrow">{event.category}</p><h2>{event.title}</h2>
    <p><time dateTime={event.date}>{event.date}</time> · {event.location}</p>
    <p>{event.places === 0 ? 'Currently full' : `${event.places} fictional places`}</p>
    {event.description && <p>{event.description}</p>}
    {onToggle && <button type="button" aria-pressed={saved}
      aria-label={`${saved ? 'Unsave' : 'Save'} ${event.title}`}
      onClick={() => onToggle(event.id)}>{saved ? 'Saved' : 'Save event'}</button>}
    {detailLink}
  </article>;
}

export function EventList({ events, savedIds = [], onToggle, emptyMessage = 'Nothing matches. Try another search or category.' }: {
  events: readonly CommunityEvent[]; savedIds?: readonly string[];
  onToggle?: (id: string) => void; emptyMessage?: string;
}) {
  return <><p role="status">{events.length} {events.length === 1 ? 'event' : 'events'} shown</p>
    {events.length === 0 ? <p>{emptyMessage}</p> :
      <div className="event-grid">{events.map(event => <EventCard key={event.id}
        event={event} saved={savedIds.includes(event.id)} onToggle={onToggle} />)}</div>}
  </>;
}