import type { GridAsset } from './shared';
import type { Selection } from './useSelection';
import { useMemo } from 'react';
import { AssetTile } from './AssetTile';
import { justifyRows } from './shared';
import { useContainerWidth } from './useContainerWidth';

// A justified grid over a flat list of assets — albums, search results, a person's photos.
//
// The timeline uses TimelineGrid instead, because it has to lay out months it has not downloaded yet. This one
// always has every asset in hand, so it can lay the whole thing out in one pass.

type PhotoGridProps = {
  assets: GridAsset[];
  token: string | null;
  selection: Selection;
  rowHeight?: number;
  gap?: number;
  empty?: React.ReactNode;
};

export const PhotoGrid = ({ assets, token, selection, rowHeight = 210, gap = 4, empty }: PhotoGridProps) => {
  const [ref, width] = useContainerWidth<HTMLDivElement>();

  const rows = useMemo(
    () =>
      width > 0
        ? justifyRows({ items: assets, ratioOf: (a) => a.ratio, containerWidth: width, targetHeight: rowHeight, gap })
        : [],
    [assets, width, rowHeight, gap],
  );

  return (
    <div ref={ref} className="w-full">
      {assets.length === 0 && empty}
      <div className="flex flex-col" style={{ gap }}>
        {rows.map((row, index) => (
          <div key={index} className="flex" style={{ gap }}>
            {row.tiles.map(({ item, width: w, height: h }) => (
              <AssetTile
                key={item.id}
                asset={item}
                token={token}
                width={w}
                height={h}
                selected={selection.selected.has(item.id)}
                selecting={selection.isSelecting}
                onToggle={(id, ev) => selection.toggle(id, ev)}
              />
            ))}
          </div>
        ))}
      </div>
    </div>
  );
};