import { effectiveHidden, type ColumnView } from "./columns.ts";
import { AgileCard } from "./AgileCard.tsx";

// колонки доски; контейнер прокручивается по горизонтали внутри себя; колонки одной высоты, у каждой прокручивается список
export function BoardColumns({ columns, lastCaption, hidden = [] }: { columns: ColumnView[]; lastCaption?: string; hidden?: string[] }) {
  const lastIdx = columns.reduce((acc, c, i) => (c.extra ? acc : i), -1);
  const gone = effectiveHidden(columns.map((c) => c.name), hidden);
  return (
    <div className="agile-columns">
      {columns.map((c, i) => gone.includes(c.name) ? null : (
        <section key={c.name + i} className={"agile-col" + (c.extra ? " is-extra" : "")} aria-label={c.name}>
          <header className="agile-col__head">
            <h3 className="agile-col__name">{c.name}</h3>
            <span className="agile-col__count">{c.issues.length}</span>
          </header>
          {lastCaption && i === lastIdx && <p className="agile-col__caption">{lastCaption}</p>}
          <ul className="agile-col__list">{c.issues.map((x) => <AgileCard key={x.key} issue={x} />)}</ul>
        </section>
      ))}
    </div>
  );
}