SearchField

import { useState } from 'react';
import { SearchField, Text, TopNav } from '@anicanon/sakuga/ui';

const ALL = [
  {
    title: 'Characters',
    options: [
      { label: 'Kiko', hint: 'E.R.A. · Rua da Sé', initial: 'K' },
      { label: 'Ken', hint: 'Heros', initial: 'K' },
    ],
  },
  {
    title: 'Places',
    options: [{ label: 'Kioto Station', hint: 'Night market', icon: 'place' }],
  },
];

function filter(t) {
  t = t.trim().toLowerCase();
  return ALL.map((g) => ({
    title: g.title,
    options: g.options.filter(
      (o) => t && o.label.toLowerCase().indexOf(t) === 0,
    ),
  })).filter((g) => g.options.length);
}

function Live() {
  const [value, setValue] = useState('Ki');
  return (
    <SearchField
      label="Search the series"
      placeholder="Characters, places, episodes"
      value={value}
      results={filter(value)}
      emptyText="Nothing in this series matches"
      onChange={setValue}
      onSelect={(o) => setValue(o.label)}
    />
  );
}

function Nav() {
  const [open, setOpen] = useState(true);
  return (
    <TopNav
      brand={{ name: 'AniCanon' }}
      links={['Home', 'Series', 'Shorts', 'Manga'].map((l) => ({
        label: l,
        current: l === 'Series',
        onClick: () => {},
      }))}
      create={{ onClick: () => {} }}
      account={{ name: 'Raul Menezes' }}
      search={{
        open: open,
        onOpen: () => setOpen(true),
        onClose: () => setOpen(false),
        label: 'Search AniCanon',
        placeholder: 'Series, creators, characters',
      }}
    />
  );
}

function Cap(t) {
  return (
    <Text variant="caption" tone="muted">
      {t}
    </Text>
  );
}

export default function SearchFieldExample() {
  return (
    <>
      {Cap('Rest')}
      <SearchField
        label="Search the series"
        placeholder="Characters, places, episodes"
      />
      {Cap('Typed: clear at the end')}
      <SearchField label="Search the library" value="rooftop chase" />
      {Cap('Results, live')}
      <Live />
      {Cap('Searching')}
      <SearchField label="Search the series" value="Sé" results={[]} busy />
      {Cap('Nothing matches')}
      <SearchField
        label="Search the series"
        value="Zubat"
        results={[]}
        emptyText="Nothing in this series matches"
      />
      {Cap('TopNav, searching')}
      <Nav />
    </>
  );
}