import * as React from 'react';
import styled from 'styled-components';

interface IProps {
  columns?: number;
  children: any;
  css?: string;
  xs?: number; sm?: number; md?: number; lg?: number;
}

const StyledGrid = styled.div<{columns?: number}>`
  display: inline-block;

  .col {
    width:  ${props => (100 / (props.columns as any))}%;
    float: left;
    padding: 0 17px;

    &:first-of-type { padding-left: 0; }

    &:last-of-type { padding-right: 0; }
  }
`;

const Column = styled.div.attrs(() => ({
  className: 'col',
}))<{ mobileOnly?: boolean; desktopOnly?: boolean; xs?: number; sm?: number; md?: number; lg?: number; }>`
&.col {
  width: ${({ xs }) => 100 / (xs as any)}%;

  @media screen and (max-width: 768px) {
    ${({ desktopOnly }) => desktopOnly && `display: none`};
    padding-right: ${({ xs }) => xs === 1 && `0`};
    padding-left: ${({ xs }) => xs === 1 && `0`}
  }

  @media screen and (min-width: 768px) {
    ${({ mobileOnly }) => mobileOnly && `display: none`};
    width: ${({ sm }) => 100 / (sm as any)}%;
    padding-right: ${({ sm }) => sm === 1 && `0`};
    padding-left: ${({ sm }) => sm === 1 && `0`};
  }

  @media screen and (min-width: 992px) {
    width: ${({ md }) => 100 / (md as any)}%;
    padding-right: ${({ md }) => md === 1 && `0`};
    padding-left: ${({ md }) => md === 1 && `0`};
  }

  @media screen and (min-width: 1200px) {
    width: ${({ lg }) => 100 / (lg as any)}%;
    padding-right: ${({ lg }) => lg === 1 && `0`};
    padding-left: ${({ lg }) => lg === 1 && `0`};
  }
}
`;

const Grid = ({ children, ...rest }: IProps) => (
  <StyledGrid {...rest}>
    {children}
  </StyledGrid>
);

Grid.Column = Column;

export default Grid;