// @flow
import type { StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';
import { getSpacingRules } from '../../../mixins/spacing';
import type { HeadProps } from './head.proptypes';
import { getTextAlign, getFontWeight } from '../../../mixins/typography';
import {
  getH1FontSize,
  getH2FontSize,
  getH3FontSize,
  getH4FontSize,
  getH5FontSize,
  getHFontFamily,
} from './head.css-rules';
import { getForegroundColor } from '../../../mixins/branding';
import { getStackeeRules } from '../../../mixins/stackee';

const sharedAttributes = () => ({
  bold: 'true',
});

const sharedSpacing = `
  margin: 0;
  padding: 0;
`;

export const Head1: StatelessFunctionalComponent<HeadProps> = styled.h1.attrs(
  sharedAttributes,
)`
  ${sharedSpacing}
  &&& {
    ${getSpacingRules}
  }

  font-size: ${getH1FontSize};
  font-family: ${getHFontFamily};
  font-weight: ${getFontWeight};
  line-height: 1.2;
  color: ${getForegroundColor};
  text-align: ${getTextAlign};
  ${getStackeeRules};
`;

Head1.displayName = 'Head1';

export const Head2: StatelessFunctionalComponent<HeadProps> = styled.h2.attrs(
  sharedAttributes,
)`
  ${sharedSpacing}
  &&& {
    ${getSpacingRules}
  }
  font-size: ${getH2FontSize};
  font-family: ${getHFontFamily};
  font-weight: ${getFontWeight};
  line-height: 1.2;
  color: ${getForegroundColor};
  text-align: ${getTextAlign};
  ${getStackeeRules};
`;

Head2.displayName = 'Head2';

export const Head3: StatelessFunctionalComponent<HeadProps> = styled.h3.attrs(
  sharedAttributes,
)`
  ${sharedSpacing}
  &&& {
    ${getSpacingRules}
  }
  font-size: ${getH3FontSize};
  font-family: ${getHFontFamily};
  font-weight: ${getFontWeight};
  line-height: 1.2;
  color: ${getForegroundColor};
  text-align: ${getTextAlign};
  ${getStackeeRules};
`;

Head3.displayName = 'Head3';

export const Head4: StatelessFunctionalComponent<HeadProps> = styled.h4.attrs(
  sharedAttributes,
)`
  ${sharedSpacing}
  &&& {
    ${getSpacingRules}
  }
  font-size: ${getH4FontSize};
  font-family: ${getHFontFamily};
  font-weight: ${getFontWeight};
  line-height: 1.2;
  color: ${getForegroundColor};
  text-align: ${getTextAlign};
  ${getStackeeRules};
`;

Head4.displayName = 'Head4';

export const Head5: StatelessFunctionalComponent<HeadProps> = styled.h5.attrs(
  sharedAttributes,
)`
  ${sharedSpacing}
  &&& {
    ${getSpacingRules}
  }
  font-size: ${getH5FontSize};
  font-family: ${getHFontFamily};
  font-weight: ${getFontWeight};
  line-height: 1.2;
  color: ${getForegroundColor};
  text-align: ${getTextAlign};
  ${getStackeeRules};
`;

Head5.displayName = 'Head5';
