import styled, { css } from 'styled-components';
import { ThemeProps, UIStyledComponentProps } from '../../components/types';
import { eachMedia, getCssResponsive } from '../../components/utils';
import { IThemeGridVariant } from '../../theme';

export type GridRowBaseProps = {
  columnGap?: string;
  columns?: string;
  rowGap?: string;
  size?: string;
  variant?: IThemeGridVariant;
};

export type GridRowProps = UIStyledComponentProps<GridRowBaseProps>;

export const GridRow = styled.div<GridRowProps>`
  ${props => getCssResponsive(props)}
  ${props => getGrid(props)}
`;

export function getGrid(props: GridRowBaseProps & ThemeProps, defaultValue: GridRowBaseProps = {}) {
  props = { ...defaultValue, ...props };
  const variant: IThemeGridVariant = props.variant || 'default';
  return css`
    ${(props.columns) ? css`
      --grid-columns: ${props.columns};
    `: css`
      --grid-columns: var(--grid-${variant}-columns, 12);
    `}
    ${(props.size) ? css`
      --grid-size: ${props.size};
    `: css`
      --grid-size: var(--grid-${variant}-size, 1fr);
    `}
    ${(props.columnGap) ? css`
      --grid-column-gap: ${props.columnGap};
    `: eachMedia(props, (key: string) => `--grid-column-gap: var(--grid-${variant}-column-gap-${key}, 0);`)}
    ${(props.rowGap) ? css`
      --grid-row-gap: ${props.rowGap};
    `: eachMedia(props, (key: string) => `--grid-row-gap: var(--grid-${variant}-row-gap-${key}, 0);`)}
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-size));
    grid-column-gap: var(--grid-column-gap);
    grid-row-gap: var(--grid-row-gap);
  `;
}