import styled from 'styled-components';
import {
  gridGap,
  GridGapProps,
  gridAutoFlow,
  gridTemplateColumns,
  gridTemplateAreas,
  gridAutoColumns,
  gridAutoRows,
  alignItems,
  justifyItems,
  justifyContent,
  GridTemplateColumnsProps,
  GridTemplateAreasProps,
  GridAutoFlowProps,
  GridAutoColumnsProps,
  GridAutoRowsProps,
  AlignItemsProps,
  JustifyItemsProps,
  JustifyContentProps
} from 'styled-system';

import { Box } from '../../components/Box';
import { Item } from './Item';

export type GridProps = React.ComponentProps<typeof Box> &
  GridGapProps &
  GridAutoFlowProps &
  GridAutoFlowProps &
  GridTemplateColumnsProps &
  GridTemplateAreasProps &
  GridAutoColumnsProps &
  GridAutoRowsProps &
  AlignItemsProps &
  JustifyItemsProps &
  JustifyContentProps;

const GridComponent = styled(Box)<GridProps>(
  gridGap,
  gridAutoFlow,
  gridTemplateColumns,
  gridTemplateAreas,
  gridAutoColumns,
  gridAutoRows,
  alignItems,
  justifyContent,
  justifyItems,
  {
    display: 'grid'
  }
);

export const Grid = Object.assign(GridComponent, {
  Item
});

Grid.defaultProps = {
  gridGap: 'gridGap'
};
