import type { HTMLAttributes, PropsWithChildren } from "react";
import { cn } from "../../lib/cn";
import { toCssSize, type LayoutSpacing } from "./layout-primitives";

export type WrapProps = PropsWithChildren<
  HTMLAttributes<HTMLDivElement> & {
    alignment?: "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly";
    crossAxisAlignment?: "start" | "center" | "end" | "stretch";
    direction?: "horizontal" | "vertical";
    runSpacing?: LayoutSpacing;
    spacing?: LayoutSpacing;
  }
>;

const alignmentClasses: Record<NonNullable<WrapProps["alignment"]>, string> = {
  center: "justify-center",
  end: "justify-end",
  spaceAround: "justify-around",
  spaceBetween: "justify-between",
  spaceEvenly: "justify-evenly",
  start: "justify-start",
};

const crossAxisClasses: Record<NonNullable<WrapProps["crossAxisAlignment"]>, string> = {
  center: "items-center",
  end: "items-end",
  start: "items-start",
  stretch: "items-stretch",
};

export function Wrap({
  alignment = "start",
  children,
  className,
  crossAxisAlignment = "start",
  direction = "horizontal",
  runSpacing = 8,
  spacing = 8,
  style,
  ...props
}: WrapProps) {
  const horizontal = direction === "horizontal";

  return (
    <div
      className={cn(
        "flex flex-wrap",
        horizontal ? "flex-row" : "flex-col",
        alignmentClasses[alignment],
        crossAxisClasses[crossAxisAlignment],
        className,
      )}
      style={{
        columnGap: toCssSize(horizontal ? spacing : runSpacing),
        rowGap: toCssSize(horizontal ? runSpacing : spacing),
        ...style,
      }}
      {...props}
    >
      {children}
    </div>
  );
}