// @flow
import React, { type StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';
import type { SectionHeaderProps } from './section-header.proptypes';
import { getHeaderFontSize } from './section-header.css-rules';
import { getPaletteColor } from '../../../mixins/branding';
import { getSpacingRules } from '../../../mixins/spacing';
import { getStackeeRules } from '../../../mixins/stackee';
import { getFontFamily, getFontWeight } from '../../../mixins/typography';

const sharedAttributes = {
  face: 'sans',
  bold: 'true',
};

const SectionHeaderLarge: StatelessFunctionalComponent<SectionHeaderProps> = styled.h2.attrs(
  sharedAttributes,
)`
  color: ${getPaletteColor('greyscale-dark')};
  font-size: ${getHeaderFontSize};
  font-family: ${getFontFamily};
  font-weight: ${getFontWeight};
  line-height: 1.2;
  margin-top: 0px;
  margin-bottom: 20px;
  &&& {
    ${getSpacingRules}
  }
  ${getStackeeRules}
`;

SectionHeaderLarge.displayName = 'SectionHeaderLarge';

const SectionHeaderSmall: StatelessFunctionalComponent<SectionHeaderProps> = styled.h3.attrs(
  sharedAttributes,
)`
  color: ${getPaletteColor('greyscale-dark')};
  font-size: ${getHeaderFontSize};
  font-family: ${getFontFamily};
  font-weight: ${getFontWeight};
  line-height: 1.2;
  margin-top: 0px;
  margin-bottom: 10px;
  &&& {
    ${getSpacingRules}
  }
  ${getStackeeRules}
`;

SectionHeaderSmall.displayName = 'SectionHeaderSmall';

export const SectionHeader = ({
  children,
  size = 'lg',
  className,
  spacing,
  grow,
  shrink,
  basis,
}: SectionHeaderProps) => {
  switch (size) {
    case 'lg':
      return (
        <SectionHeaderLarge
          {...{ spacing, grow, shrink, basis }}
          size={size}
          className={className}
        >
          {children}
        </SectionHeaderLarge>
      );
    case 'sm':
      return (
        <SectionHeaderSmall
          {...{ spacing, grow, shrink, basis }}
          size={size}
          className={className}
        >
          {children}
        </SectionHeaderSmall>
      );
    default:
      return (
        <SectionHeaderLarge
          {...{ spacing, grow, shrink, basis }}
          size={size}
          className={className}
        >
          {children}
        </SectionHeaderLarge>
      );
  }
};

SectionHeader.displayName = 'SectionHeader';
