/** @jsx jsx */
import * as React from "react";
import css from '@styled-system/css'
import { jsx } from '@emotion/core'
import { variant } from "styled-system";
import styled from "@emotion/styled";
import { GapSizes } from "../utils/System";

//GridCol

export type GridColProps = {
    children: React.ReactNode;
    columnCount?: number;
    variant?: GapSizes // this is cool pattern of passing in a variant
    gap?: GapSizes;
    pad?: GapSizes;
    stretch?: boolean;
};
type StyledProps = {
    variant?: GapSizes;
    children: React.ReactNode;
};


export const getGapValue = (gap: GapSizes): number => {
    switch (gap) {
        case 'small':
            return 2
        case 'medium':
            return 4
        case 'large':
            return 5
        default:
            break;
    }
    return 0
}

const StyledGridCol = styled("div")<StyledProps>(
    variant({
        variants: {
            small: {
                gap: 2
            },
            medium: {
                gap: 3
            },
            large: {
                gap: 4
            }
        }
    })
);
const GridCol: React.FC<GridColProps> = (
    ({ children,  columnCount = 4 , variant, gap, pad, stretch}) => {
        
        return (
            <StyledGridCol
                variant={variant}
            css={
                css({
                    display: 'grid',
                    maxWidth: `100%`,
                    alignContent: !stretch ? `start` : 'initial',
                    gap:  gap ? getGapValue(gap) : 'auto',
                    padding:  pad ? getGapValue(pad) : 'initial',
                    gridTemplateColumns:`repeat(${columnCount}, 1fr)`
                })} >
                { children }
            </StyledGridCol>
        );
    }
);

export default GridCol;