// меню «Колонки» экранов «Спринт» и «Kanban»: скрыть колонки доски; последнюю видимую скрыть нельзя
import { Badge, Checkbox, Dropdown, IconChevronDown } from "../../../ui/index.ts";
import { effectiveHidden } from "./columns.ts";

export function ColumnsMenu({ names, hidden, onChange }: { names: string[]; hidden: string[]; onChange(hidden: string[]): void }) {
  const gone = effectiveHidden(names, hidden);   // имена, которых на доске больше нет, не показываются и не считаются
  const visible = names.filter((n) => !gone.includes(n));
  const flip = (name: string, show: boolean) => onChange(names.filter((n) => (n === name ? !show : gone.includes(n))));
  return (
    <Dropdown className="agile-columns-menu" button={({ open, toggle }) => (
      <button type="button" className="ui-input multi-btn" aria-label={gone.length > 0 ? `Колонки, скрыто ${gone.length}` : "Колонки"} aria-haspopup="true" aria-expanded={open} onClick={toggle}>
        <span className="lbl">Колонки</span>{gone.length > 0 && <Badge>{gone.length}</Badge>}<IconChevronDown size={16} />
      </button>
    )}>
      {() => (
        <div className="dd-list" role="group" aria-label="Колонки">
          {names.map((n) => {
            const on = !gone.includes(n);
            return <Checkbox key={n} className="dd-item" label={n} checked={on} disabled={on && visible.length === 1}
              onChange={(e) => flip(n, e.target.checked)} />;
          })}
        </div>
      )}
    </Dropdown>
  );
}