import styled, { StyledComponent } from '@emotion/styled';
import { Flex, Box } from '@rebass/emotion';
import { css } from '@emotion/core';

import TextInput from 'components/fields/text-input';
import { FieldBorderBottom } from 'components/fields/fields.styles'

import { getColumnSize } from 'utils/styles/grid';
import { breakpoints, fontSizes, space, lineHeights } from 'utils/theme';
import { forDesktopUp } from 'utils/styles/mixins';

export const FullHeightContainer: any = styled.div`
  @media (min-width: ${breakpoints.large}) {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }
`;

export const CheckoutFlexContainer: StyledComponent<any, any, any> = styled(Flex)`
  width: 100%;
  margin: ${space.xxsmall}px 0;
  display: flex;
  flex-direction: column;

  ${forDesktopUp(css`
    width: 100%;
    padding: 0 ${space.small}px;
    margin: ${space.regular}px 0;
    flex-direction: row;
    max-width: none;
    flex-wrap: nowrap;
  `)};
`;

export const CheckoutFormContainer: StyledComponent<any, any, any> = styled(Box)`
  width: 100%;
  padding-right: 0;

  ${forDesktopUp(css`
    width: 80%;
    padding-right: ${getColumnSize(1)}px;
  `)};
`;

export const CheckoutBasketContainer: StyledComponent<any, any, any> = styled(Box)`
  width: 100%;
  order: -1;
  padding-right: 0;
  margin-bottom: ${space.regular}px;

  ${forDesktopUp(css`
    width: 40%;
    margin-bottom: 0;
    order: unset;
  `)}
`;

export const FormHeader = styled.h3`
  margin-bottom: ${space.xsmall};
  font-size: ${fontSizes.large};
  line-height: ${lineHeights.large};

  @media (min-width: ${breakpoints.small}) {
    font-size: ${fontSizes.xLarge};
    line-height: ${lineHeights.xxLarge};
  }
`;

export const InputField: StyledComponent<any, any, any> = styled(TextInput)`
  ${FieldBorderBottom};
  margin: ${space.xxsmall}px;
  font-size: ${fontSizes.base};
  padding-left: 0px;

  @media (min-width: ${breakpoints.large}) {
    width: ${(props: any): any => props.width ? `calc(${props.width} - ${space.xsmall}px)` : '100%'};
  }
`;