import { filtersActive, type Filters } from "../boardState";
import { LABELS, MEMBERS, TODAY, formatDueLong } from "../model";
import { IconSearch } from "./Icons";

type Props = {
  filters: Filters;
  onChange: (f: Filters) => void;
  onClear: () => void;
  visibleCount: number;
  totalCount: number;
};

export function FilterBar({ filters, onChange, onClear, visibleCount, totalCount }: Props) {
  return (
    <div className="filterbar">
      <div className="search">
        <IconSearch size={15} />
        <input
          type="search"
          placeholder="Search titles and descriptions…"
          aria-label="Search cards by title or description"
          value={filters.text}
          onChange={e => onChange({ ...filters, text: e.target.value })}
        />
      </div>
      <label className="filter-label">
        <span>Assignee</span>
        <select
          className="filter-select"
          aria-label="Filter by assignee"
          value={filters.assignee}
          onChange={e => onChange({ ...filters, assignee: e.target.value })}
        >
          <option value="all">All assignees</option>
          <option value="unassigned">Unassigned</option>
          {MEMBERS.map(m => (
            <option key={m.id} value={m.id}>
              {m.name}
            </option>
          ))}
        </select>
      </label>
      <label className="filter-label">
        <span>Label</span>
        <select
          className="filter-select"
          aria-label="Filter by label"
          value={filters.label}
          onChange={e => onChange({ ...filters, label: e.target.value })}
        >
          <option value="all">All labels</option>
          {LABELS.map(l => (
            <option key={l.id} value={l.id}>
              {l.name}
            </option>
          ))}
        </select>
      </label>
      {filtersActive(filters) && (
        <button type="button" className="clear-btn" onClick={onClear}>
          Clear filters
        </button>
      )}
      <div className="filter-meta">
        <span>
          {visibleCount} of {totalCount} cards
        </span>
        <span className="today" title="The board uses this fixed demo date">
          Today · {formatDueLong(TODAY)}
        </span>
      </div>
    </div>
  );
}