import { resolveColumnCount } from '../model/columns';
import type { ColumnsOption } from '../model/columns';

/**
 * Apply native CSS masonry layout using CSS Grid with `grid-template-rows: masonry`.
 *
 * This is an experimental CSS feature whose specification is still settling, so
 * it is only ever applied after an explicit `CSS.supports()` check.
 *
 * When `columns` is supplied the track list becomes explicit; a breakpoint map
 * is resolved against the container's current width, and re-resolved whenever
 * the caller re-applies on resize.
 */
export function applyCssMasonry(
  container: HTMLElement,
  gutter: number,
  minColWidth: number,
  columns?: ColumnsOption
): void {
  container.style.display = 'grid';

  if (columns !== undefined) {
    const count = resolveColumnCount(container.clientWidth, {
      columns,
      minColWidth,
      gutter,
    });
    container.style.gridTemplateColumns = `repeat(${count}, minmax(0, 1fr))`;
  } else {
    container.style.gridTemplateColumns = `repeat(auto-fill, minmax(${minColWidth}px, 1fr))`;
  }

  container.style.gridTemplateRows = 'masonry';
  container.style.gap = `${gutter}px`;
  container.style.alignContent = 'start';
}

/**
 * Remove CSS masonry styles from a container.
 */
export function removeCssMasonry(container: HTMLElement): void {
  container.style.display = '';
  container.style.gridTemplateColumns = '';
  container.style.gridTemplateRows = '';
  container.style.gap = '';
  container.style.alignContent = '';
}