import styled, { css } from 'styled-components';
import mq from './mq';
import { BOX_STYLED_SYSTEM, TEXT_STYLED_SYSTEM, Text } from './grid';
import typographyStyle from './lib/typographyStyle';
import colors from './colors';

export const WITH_COUNTER = css`
  content: attr(data-counter);
  margin-left: 5px;
  color: ${colors.gray['800']};
  font-size: 12px;
  vertical-align: top;
`;

export const TYPOGRAPHY_STYLES = {
  h1: typographyStyle([40, 45, 66, 68, 70], 1.05),
  h1by2: typographyStyle([25, 30, 46, 48, 50], 1.05),
  h2: typographyStyle([23, 23, 32, 36, 38], 1.25),
  h3: typographyStyle([19, 19, 20, 22, 24], 1.4),
  h5: typographyStyle([21, 21, 28, 30, 32], 1.2),
  text: typographyStyle([14, 14, 16], 1.55),
};

export const H1 = styled(Text)`
  ${TYPOGRAPHY_STYLES.h1};
`;
H1.displayName = 'H1';
H1.defaultProps = {
  as: 'h1',
  m: 0,
  fontWeight: 700,
};

export const H1by2 = styled(Text)`
  ${TYPOGRAPHY_STYLES.h1by2};
`;
H1by2.displayName = 'H1by2';
H1by2.defaultProps = {
  as: 'div',
  fontWeight: 700,
};

export const H2 = styled(Text)`
  ${TYPOGRAPHY_STYLES.h2};
`;
H2.displayName = 'H2';
H2.defaultProps = {
  as: 'h2',
  m: 0,
  fontWeight: 400,
};

export const H3 = styled(Text)`
  ${TYPOGRAPHY_STYLES.h3};
`;
H3.displayName = 'H3';
H3.defaultProps = {
  as: 'h3',
  m: 0,
  fontWeight: 700,
  textTransform: 'uppercase',
};

export const H4 = styled(Text)`
  ${TYPOGRAPHY_STYLES.h2};
`;
H4.displayName = 'H4';
H4.defaultProps = {
  as: 'h4',
  m: 0,
  fontWeight: 700,
};

export const H5 = styled(Text)`
  ${TYPOGRAPHY_STYLES.h5};
`;
H5.displayName = 'H5';
H5.defaultProps = {
  as: 'h5',
  m: 0,
  fontWeight: 700,
};

export const MiniHeader = styled(Text)`
  font-size: 1rem;
  text-transform: uppercase;

  ${mq.tablet`font-size: 1.2rem`};
`;

MiniHeader.defaultProps = {
  fontWeight: 400,
};

export const Subheader = styled(H3)``;
Subheader.displayName = 'Subheader';
Subheader.defaultProps = {
  as: 'div',
  fontWeight: 400,
  textTransform: 'none',
};

export const Text25 = styled(Text)`
  padding-top: ${props => (props.borderTop ? '10px' : '0')};
  ${TYPOGRAPHY_STYLES.text};
`;

Text25.defaultProps = {
  fontWeight: 400,
};

export const Text30 = styled(Text)`
  ${TYPOGRAPHY_STYLES.text};
  letter-spacing: 0.01em;
`;

Text30.defaultProps = {
  fontWeight: 400,
};

export const Subtext = styled(Text)`
  font-size: 1.2rem;
  line-height: ${({ line }) => line || 1.8};

  ${mq.desktop`font-size: 1.4rem`};
`;

Subtext.defaultProps = {
  fontWeight: 400,
};

export const SmallText = styled(Text)`
  font-size: 1.2rem;
  line-height: 1.667;
`;

SmallText.defaultProps = {
  fontWeight: 400,
};

export const List = styled.ul`
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: ${props => (props.limitWidth ? '76%' : '100%')};
  ${BOX_STYLED_SYSTEM};
  ${TEXT_STYLED_SYSTEM};
`;