import type { ForwardedRef, ForwardRefExoticComponent, PropsWithChildren } from 'react';
import React, { forwardRef } from 'react';
import classNames from 'classnames';

import type { Spacing } from '../../types';

export interface GridProps {
  /**
   * Number of columns.
   * @default 1
   */
  columns?: 1 | 2 | 3 | 4;
  /**
   * Gap between columns
   *
   * By default, `sm` size when true.
   * @type boolean | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '3xl' | '4xl'
   * @default true
   */
  gap?: boolean | Spacing;
  /**
   * Set a max-width and center component.
   *
   * By default the component will take the full width of the parent.
   * If set to `large`, the component will set a max width to page content (currently 1150px).
   * If set to `"medium"`, the component will set a width ideal for text content (currently 826px).
   * If set to `"fit"`, the component will set a width that fits its content.
   *
   * @default false
   */
  maxWidth?: false | 'large' | 'medium' | 'fit';
  /**
   * Padding around the component, currently sets 'lg' size padding only.
   *
   * If 'vertical', it will add padding-top and padding-bottom.
   * If 'horizontal', it will add padding-left and padding-right.
   * If true, it will add padding-top, padding-right, padding-bottom, and padding-left.
   *
   * @default false
   */

  padding?: boolean | 'vertical' | 'horizontal';
  /**
   * Controls whether and how the component responds to screen size.
   *
   * You may want to use it when the responsivity is being handled by other container.
   *
   * @default true
   */
  responsive?: boolean;
}

export const Grid: ForwardRefExoticComponent<PropsWithChildren<GridProps>> = forwardRef(function Grid(
  {
    children,
    columns = 1,
    gap = true,
    maxWidth,
    padding = false,
    responsive = true,
    ...props
  }: PropsWithChildren<GridProps>,
  forwardedRef: ForwardedRef<HTMLDivElement>
) {
  return (
    <div
      ref={forwardedRef}
      {...props}
      className={classNames('grid', {
        ['grid--1columns']: columns === 1,
        ['grid--2columns']: columns === 2,
        ['grid--3columns']: columns === 3,
        ['grid--4columns']: columns === 4,
        ['grid--maxWidthLarge']: maxWidth === 'large',
        ['grid--maxWidthMedium']: maxWidth === 'medium',
        ['grid--maxWidthFit']: maxWidth === 'fit',
        ['grid--gap']: gap === true,
        ['grid--noGap']: gap === false,
        ['grid--gapXxs']: gap === 'xxs',
        ['grid--gapXs']: gap === 'xs',
        ['grid--gapSm']: gap === 'sm',
        ['grid--gapMd']: gap === 'md',
        ['grid--gapLg']: gap === 'lg',
        ['grid--gapXl']: gap === 'xl',
        ['grid--gapXxl']: gap === 'xxl',
        ['grid--gap3xl']: gap === '3xl',
        ['grid--gap4xl']: gap === '4xl',
        ['grid--padding']: padding === true,
        ['grid--noPadding']: padding === false,
        ['grid--paddingVertical']: padding === 'vertical',
        ['grid--paddingHorizontal']: padding === 'horizontal',
        ['grid--responsive']: responsive === true,
        ['grid--notResponsive']: responsive === false,
      })}
    >
      {children}
    </div>
  );
});