import _Heading from 'reakit/Heading';

import styled, { css, space, theme, selector } from '../styled';
// @ts-ignore
import Icon from '../Icon/styled';
import { HeadingProps } from './Heading';

export const subHeadingProperties = css`
  font-weight: ${theme('fannypack.fontWeights.semibold')};

  & {
    ${theme('fannypack.Heading.subHeading')};
  }
`;

export const Heading = styled(_Heading)<HeadingProps>`
  font-weight: ${theme('fannypack.fontWeights.bold')};
  line-height: 1.2;

  &:not(:last-child) {
    margin-bottom: ${space(4)}rem;
  }

  .heading& + .sub-heading {
    margin-top: -1rem;
  }

  h1& {
    font-size: ${theme('fannypack.fontSizes.700')}rem;
    & {
      ${theme('fannypack.Heading.h1')};
    }
  }
  h2& {
    font-size: ${theme('fannypack.fontSizes.600')}rem;
    & {
      ${theme('fannypack.Heading.h2')};
    }
  }
  h3& {
    font-size: ${theme('fannypack.fontSizes.500')}rem;
    & {
      ${theme('fannypack.Heading.h3')};
    }
  }
  h4& {
    font-size: ${theme('fannypack.fontSizes.400')}rem;
    & {
      ${theme('fannypack.Heading.h4')};
    }
  }
  h5& {
    font-size: ${theme('fannypack.fontSizes.300')}rem;
    & {
      ${theme('fannypack.Heading.h5')};
    }
  }
  h6& {
    font-size: ${theme('fannypack.fontSizes.200')}rem;
    & {
      ${theme('fannypack.Heading.h6')};
    }
  }

  & ${selector(Icon)} {
    top: 0.15em;
  }

  & {
    ${props => props.isSubHeading && subHeadingProperties};
  }

  ${theme('fannypack.Heading.base')};
`;

export default Heading;