import { Property } from 'csstype'
import { ReactHTML } from 'react'
import styled from 'styled-components'
import { PolymorphicStyledComponent } from './types'

const minimumGutterDesktop = 32
const minimumGutterMobile = 16

const FlexContainer = styled.section<{
  flexFlow?: Property.FlexFlow
  alignContent?: Property.AlignContent
  alignItems?: Property.AlignItems
  justifyContent?: Property.JustifyContent
  flex?: Property.Flex
}>`
  display: flex;
  flex-flow: ${(props) => props.flexFlow || 'row wrap'};
  align-content: ${(props) => props.alignContent || 'flex-start'};
  align-items: ${(props) => props.alignItems || 'flex-start'};
  justify-content: ${(props) => props.justifyContent || 'flex-start'};
  flex: ${(props) => props.flex || ''};
  max-width: 100%;
`

export const PageContainer = styled(FlexContainer).attrs(() => ({ as: 'main' }))`
  flex: 1 1 100%;
  width: 100%;
  align-self: stretch;
  padding-bottom: 40px;
  padding-top: 40px;
  padding-right: calc((50% - (${({ theme }) => theme.contentWidth}px / 2)));
  padding-left: calc((50% - (${({ theme }) => theme.contentWidth}px / 2)));

  @media (max-width: ${({ theme }) => theme.contentWidth + minimumGutterDesktop * 2}px) {
    padding-right: ${minimumGutterDesktop}px;
    padding-left: ${minimumGutterDesktop}px;
  }

  @media (max-width: ${({ theme }) => theme.media.small}) {
    padding-bottom: 24px;
    padding-top: 24px;
    padding-right: ${minimumGutterMobile}px;
    padding-left: ${minimumGutterMobile}px;
  }
` as PolymorphicStyledComponent<typeof FlexContainer, ReactHTML['main']>

PageContainer.displayName = 'PageContainer'