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

export interface StyledProps {
  themeFontSize: 10 | 12 | 14 | 16;
  themeFontWeight: 'light' | 'regular' | 'semi-bold' | 'bold';
  themeIntent:
    | 'main'
    | 'body'
    | 'subdued'
    | 'primary'
    | 'success'
    | 'danger'
    | 'warning'
    | 'error'
    | 'white';
}

const textCss = css<StyledProps>`
  margin: 0;
  padding: 0;

  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'main':
        return css`
          color: ${theme.colors.typography.main};
        `;
      case 'body':
        return css`
          color: ${theme.colors.typography.body};
        `;
      case 'subdued':
        return css`
          color: ${theme.colors.typography.subdued};
        `;
      case 'primary':
        return css`
          color: ${theme.colors.typography.primary};
        `;
      case 'success':
        return css`
          color: ${theme.colors.typography.success};
        `;
      case 'danger':
        return css`
          color: ${theme.colors.typography.danger};
        `;
      case 'warning':
        return css`
          color: ${theme.colors.typography.warning};
        `;
      case 'error':
        return css`
          color: ${theme.colors.typography.error};
        `;
      case 'white':
        return css`
          color: ${theme.colors.typography.white};
        `;
    }
  }};

  ${({ 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};
        `;
    }
  }};

  ${({ themeFontSize, theme }) => {
    switch (themeFontSize) {
      case 10:
        return css`
          font-size: ${theme.fontSizes.typography.xsmall};
          line-height: ${theme.lineHeights.typography.xsmall};
        `;
      case 12:
        return css`
          font-size: ${theme.fontSizes.typography.small};
          line-height: ${theme.lineHeights.typography.small};
        `;
      case 14:
        return css`
          font-size: ${theme.fontSizes.typography.medium};
          line-height: ${theme.lineHeights.typography.medium};
        `;
      case 16:
        return css`
          font-size: ${theme.fontSizes.typography.large};
          line-height: ${theme.lineHeights.typography.large};
        `;
    }
  }};
`;

// Suport inline elements:
// * Inline elements:
// * * <strong>
// * * <b>
// * * <label>
// * * <a>
// * * <span>
// * * <br>
// * * <em>
// * * <i>
const nestedInlineStyle = css`
  > strong,
  > b,
  > label {
    margin: 0;
    padding: 0;

    font-weight: ${({ theme }) => theme.fontWeights.typography.nestedStrongTag};
  }

  > em,
  > i,
  > span,
  > br {
    margin: 0;
    padding: 0;
  }

  > a {
    margin: 0;
    padding: 0;

    text-decoration: none;

    color: ${({ theme }) => theme.colors.typography.nestedLink};
    &:hover,
    &:focus {
      color: ${({ theme }) => theme.colors.typography.hoverNestedLink};
    }
  }
`;
const StyledParagraphBlock = styled.p<StyledProps>`
  ${textCss};
  ${nestedInlineStyle};
`;

const StyledDivBlock = styled.div<StyledProps>`
  ${textCss};
  ${nestedInlineStyle};

  > p {
    ${textCss};
    ${nestedInlineStyle};
  }

  > ul {
    margin: 0;
    padding: 0;
    padding-inline-start: ${({ theme }) =>
      theme.space.typography.nestedUnorderedListPaddingLeft};

    > li {
      margin: 0;
      padding: 0;
    }
  }
`;

const StyledSpanInline = styled.span<StyledProps>`
  ${textCss};
  ${nestedInlineStyle};
`;

const StyledLabelInline = styled.label<
  StyledProps & LabelHTMLAttributes<HTMLLabelElement>
>`
  ${textCss};
  ${nestedInlineStyle};
`;

export {
  StyledParagraphBlock,
  StyledDivBlock,
  StyledSpanInline,
  StyledLabelInline,
};