import React, { forwardRef } from "react";
import classNames from "classnames";
import { Box, BoxProps } from "../Box";
import { bemHOF } from "../../utilities";

const cn = bemHOF("Grid");

/**
 * @deprecated
 */
export interface GridProps extends BoxProps {
  /**
   * Maps to the
   * [`grid-template-columns` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
   * which defines the line names and track sizing functions of the grid columns.
   */
  columns?: string | string[];
  /**
   * Maps to the
   * [`grid-template-rows` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)
   * which defines the line names and track sizing functions of the grid rows.
   */
  rows?: string | string[];
  /**
   * Sets the gaps (gutters) between rows and columns. It can be a single value
   * to set both row and column gaps or two values separated by a space to define
   * separate row and column gaps.
   */
  gap?: string;
}

/**
 * @deprecated
 */
export interface GridItemProps extends BoxProps {
  /**
   * Specifies a grid item’s size and location within a grid column; internally,
   * it sets the [`grid-column`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)
   * CSS property
   */
  column?: string;
  /**
   * Specifies a grid item’s size and location within a grid row; internally,
   * it sets the [`grid-row`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)
   * CSS property
   */
  row?: string;
  /**
   * Specifies a grid item’s size and location within a grid; internally,
   * it sets the [`grid-area`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)
   * CSS property. `grid-area` is a shorthand property that can set both column
   * and row in a single value.
   */
  area?: string;
}

/**
 * @deprecated
 */
export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
  (props, ref) => {
    const {
      className,
      style,
      column: gridColumn,
      row: gridRow,
      area: gridArea,
      ...rest
    } = props;

    /**
     * The compiler combines grid-column and grid-row into grid-area.
     * If we don’t check for a custom grid-area first, then grid-columns
     * and grid-rows don’t get applied.
     */
    const styles = gridArea
      ? {
          gridArea,
          ...style,
        }
      : {
          gridColumn,
          gridRow,
          ...style,
        };

    return <Box className={className} ref={ref} style={styles} {...rest} />;
  },
);

/**
 * @deprecated use the “grid” classname instead
 */
const Grid = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
  const { className, style, columns = [], rows = [], gap, ...rest } = props;

  const gridTemplateColumns = Array.isArray(columns)
    ? columns.join(" ")
    : columns;
  const gridTemplateRows = Array.isArray(rows) ? rows.join(" ") : rows;

  const styles = {
    gridTemplateColumns,
    gridTemplateRows,
    gap,
    ...style,
  };

  return (
    <Box
      className={classNames(cn(), className)}
      ref={ref}
      style={styles}
      {...rest}
    />
  );
});

const CompoundGrid = Object.assign(Grid, {
  Item: GridItem,
});

export { CompoundGrid as Grid };