import React, { ReactElement } from 'react';
import styled, { css } from 'styled-components';

import { CommonProps } from '../../common';

export const HEADINGS = {
  1: 'h1',
  2: 'h2',
  3: 'h3',
  4: 'h4',
  5: 'h5',
};

const Heading = ({
  themeLevel,
  children,
  id,
  className,
  style,
  'data-test-id': dataTestId,
}: {
  children: string | ReactElement;
  className?: string;
  themeLevel: 1 | 2 | 3 | 4 | 5;
} & CommonProps): ReactElement => {
  return React.createElement(
    HEADINGS[themeLevel],
    { className, style, id, 'data-test-id': dataTestId },
    children
  );
};

const StyledTitle = styled(Heading)<{
  themeFontWeight: 'light' | 'regular' | 'semi-bold' | 'bold';
  themeIntent: 'main' | 'subdued';
  themeLevel: 1 | 2 | 3 | 4 | 5;
}>`
  margin: 0;
  padding: 0;

  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'main':
        return css`
          color: ${theme.colors.typography.main};
        `;
      case 'subdued':
        return css`
          color: ${theme.colors.typography.subdued};
        `;
    }
  }};

  ${({ themeFontWeight, theme }) => {
    switch (themeFontWeight) {
      case 'light':
        return css`
          font-weight: ${theme.fontWeights.typography.light};
        `;
      case 'regular':
        return css`
          font-weight: ${theme.fontWeights.typography.regular};
        `;
      case 'semi-bold':
        return css`
          font-weight: ${theme.fontWeights.typography.semiBold};
        `;
      case 'bold':
        return css`
          font-weight: ${theme.fontWeights.typography.bold};
        `;
    }
  }};

  ${({ themeLevel, theme }) => {
    switch (themeLevel) {
      case 1:
        return css`
          font-size: ${theme.fontSizes.typography.xxxxxlarge};
          line-height: ${theme.lineHeights.typography.xxxxxlarge};
        `;
      case 2:
        return css`
          font-size: ${theme.fontSizes.typography.xxxxlarge};
          line-height: ${theme.lineHeights.typography.xxxxlarge};
        `;
      case 3:
        return css`
          font-size: ${theme.fontSizes.typography.xxxlarge};
          line-height: ${theme.lineHeights.typography.xxxlarge};
        `;
      case 4:
        return css`
          font-size: ${theme.fontSizes.typography.xxlarge};
          line-height: ${theme.lineHeights.typography.xxlarge};
        `;
      case 5:
        return css`
          font-size: ${theme.fontSizes.typography.xlarge};
          line-height: ${theme.lineHeights.typography.xlarge};
        `;
    }
  }};
`;

export default StyledTitle;