import cx from "classnames";
import React from "react";
import { genResponsiveClasses } from "../../utils";

export type GridVAlign = "stretch" | "start" | "end" | "center";
export type GridHAlign = "end" | "center" | "space-around" | "space-between";
export type GridRowGapSize =
  | "none"
  | "xsmall"
  | "small"
  | "medium"
  | "large"
  | "xlarge"
  | Record<string, "none" | "xsmall" | "small" | "medium" | "large" | "xlarge">;
export type GridColumnGapSize =
  | "none"
  | "small"
  | "default"
  | "large"
  | "xlarge"
  | Record<string, "none" | "small" | "default" | "large" | "xlarge">;

export interface GridProps extends React.HTMLAttributes<HTMLElement> {
  vAlign?: GridVAlign;
  hAlign?: GridHAlign;
  tag?: React.ElementType;
  justifyHeight?: boolean;
  rowGapSize?: GridRowGapSize;
  columnGapSize?: GridColumnGapSize;
}

const CLASS_ROOT = "grid";

export const Grid = React.forwardRef<HTMLElement, GridProps>(
  (
    {
      className,
      hAlign,
      vAlign,
      tag = "div",
      justifyHeight,
      rowGapSize,
      columnGapSize,
      ...other
    },
    ref,
  ) => {
    const classes = cx(
      CLASS_ROOT,
      {
        [`align-items-${vAlign}`]: vAlign,
        [`justify-content-${hAlign}`]: hAlign,
        [`${CLASS_ROOT}--justify-height`]: justifyHeight,
      },
      ...genResponsiveClasses(`${CLASS_ROOT}-column-gap`, columnGapSize),
      ...genResponsiveClasses(`${CLASS_ROOT}-row-gap`, rowGapSize),
      className,
    );
    const TagName = tag;

    return <TagName className={classes} ref={ref} {...other} />;
  },
);

Grid.displayName = "Grid";