import styled from "styled-components";
import React from "react";
import {
  sizeStyle,
  fontStyle,
  designStyle,
  elementProps,
  gridStyle,
  FontStyle,
  SizeStyle,
  ElementProps,
  GridStyle,
} from "../generator";

export interface GridProps extends FontStyle, SizeStyle, ElementProps, GridStyle {
  children?: React.ReactNode;
  background?: string;
  max ?: boolean;
}

const Layout = styled.div<{ props: any }>`
  ${(props: any) => `
    ${gridStyle(props)}
    ${sizeStyle(props)}
    ${fontStyle(props, false)}
    ${props.background && `background: ${props.background};`}`}
`;

export const Grid = (props: GridProps) => {
  const { children } = props;
  const elProps = elementProps(props);

  return (
    <Layout {...props} {...elProps}>
      {children}
    </Layout>
  );
};

const GridItemLayout = styled.div<{ props: any }>`
  ${(props : any) => `
     ${sizeStyle(props)}
     ${gridStyle(props)}   
     ${props.gridRowStart && `grid-row-start: ${props.gridRowStart};`}
     ${props.gridColumnStart && `grid-column-start: ${props.gridColumnStart};`}
     ${props.background && `background: ${props.background};`}
     ${fontStyle(props, false)}
     ${designStyle(props)}`}
`;

const GridItem = (props: any) => {
  const elProps = elementProps(props);

  return (
    <GridItemLayout {...props} {...elProps}>
      {" "}
      {props.children}{" "}
    </GridItemLayout>
  );
};

Grid.Item = GridItem;

export default Grid;