Filter bar

export const Default = () => <Bar initial={{ faze: 'jednani', vlastnik: 'ja' }} />;

export const Variants = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
    <Labeled text="empty bar — add a filter and the chip appears already filled in (Notion: a chip without a value does not exist)">
      <Bar />
    </Labeled>

    <Labeled text="always-open search in the bar (.fb-search — field kind 'text', inline)">
      <Bar initial={{ kraj: 'praha' }} inlineSearch saveForAll={false} />
    </Labeled>

    <Labeled text="conjunction between chips — click it: „a zároveň“ turns into „nebo“ and the two chips merge into one tinted group — the bar stays 47px tall either way (ACRM-43/49)">
      <Bar initial={{ faze: 'jednani', vlastnik: 'ja' }} groupable saveForAll={false} />
    </Labeled>

    <Labeled text="host without segments — no „Uložit pro všechny“, only reset">
      <Bar initial={{ termin: 'mesic' }} saveForAll={false} />
    </Labeled>
  </div>
);

export const States = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
    <Labeled text="empty — no filter set, so no „Vymazat filtry“ and no „Uložit pro všechny“">
      <Bar />
    </Labeled>

    <Labeled text="chip with an open menu (.open)">
      <div className="fb">
        <button type="button" className="fb-chip open" aria-haspopup="menu" aria-expanded="true">
          <Icon name="target" />
          <span className="k">Fáze</span>
          <span className="v">Jednání</span>
          <Icon name="chevron-down" className="chev" />
        </button>
        <button type="button" className="fb-chip">
          <Icon name="user" />
          <span className="k">Vlastník</span>
          <span className="v">Já</span>
          <Icon name="chevron-down" className="chev" />
        </button>
      </div>
    </Labeled>

    <Labeled text="long value — clipped at 148px, the chip never grows past it">
      <div className="fb">
        <button type="button" className="fb-chip">
          <Icon name="tag" />
          <span className="k">Štítky</span>
          <span className="v">Investoři · Dluhopisy · Praha · Retenční kampaň 2026</span>
          <Icon name="chevron-down" className="chev" />
        </button>
      </div>
    </Labeled>

    <Labeled text="toggle chip in the Section top bar (.lst-toggle) — the accent dot means „a filter is on“">
      <div className="fb">
        <button type="button" className="fb-chip lst-toggle set" aria-pressed="true">
          <Icon name="filter" />
          <span className="k">Filtr</span>
        </button>
        <button type="button" className="fb-chip">
          <Icon name="target" />
          <span className="k">Fáze</span>
          <span className="v">Jednání</span>
          <Icon name="chevron-down" className="chev" />
        </button>
      </div>
    </Labeled>

    <Labeled text="disabled toggle chip — the look comes from .lst-toggle:disabled (ds/list-view.css)">
      <div className="fb">
        <button type="button" className="fb-chip lst-toggle" disabled>
          <Icon name="filter" />
          <span className="k">Filtr</span>
        </button>
      </div>
    </Labeled>
  </div>
);

export const WithIconAndKbd = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
    <Labeled text="every chip carries the field icon on the left and a chevron on the right — both are part of the chip, not optional decoration">
      <Bar initial={{ faze: 'jednani', vlastnik: 'ja', termin: 'mesic', stitky: ['investor'] }} />
    </Labeled>
    <span style={label}>
      The bar actions carry icons too: plus (add), x (reset), users (save for everyone). The bar has
      no keyboard shortcut chips — Escape closes an open menu, Enter confirms a typed value.
    </span>
  </div>
);

export const Composition = () => {
  const [open, setOpen] = useState(true);
  return (
    <div
      style={{
        border: '1px solid var(--border)',
        borderRadius: 'var(--radius-lg)',
        overflow: 'hidden',
        background: 'var(--bg-canvas)',
      }}
    >
      {/* Shipped order: Section top bar first, filter bar as the second row under it. The
          toggle chip that opens it is FilterBar's own `.fb-chip.lst-toggle`, not the bar's
          `.tchip` — see the Usage tab, "two chips for one job". */}
      <SectionTopBar title={<SectionTopBarTitle name="Obchody" tileIcon="target" tone="blue" />}>
        <SectionTopBarSpacer />
        <button
          type="button"
          className={'fb-chip lst-toggle set' + (open ? ' open' : '')}
          aria-pressed={open}
          onClick={() => setOpen((v) => !v)}
        >
          <Icon name="filter" />
          <span className="k">Filtr</span>
        </button>
      </SectionTopBar>
      {open ? <Bar initial={{ faze: 'jednani', vlastnik: 'ja' }} /> : null}
      <div style={{ padding: 'var(--sp-5)', color: 'var(--fg-muted)', font: 'var(--small)' }}>
        Closing the bar does not switch the filters off — the accent dot on the toggle chip says
        they are still on.
      </div>
    </div>
  );
};