/** @jsxRuntime classic */
/** @jsx jsx */
import React, { Fragment, ReactNode } from 'react';
import { useTheme } from '@emotion/react';
import { css, jsx } from '@emotion/react';
import {
  StyledH1,
  StyledH2,
  StyledH3,
  StyledH4,
  StyledBodyAccented,
  StyledBody1,
  StyledBody1Link,
  StyledCTA,
  StyledBody2Accented,
  StyledBody2,
  StyledBody2Link,
  StyledCTA2,
  StyledCaptionAccented,
  StyledCaption,
  StyledCaptionLink,
  StyledCaptionCTA,
  StyledOverlinedAccented,
  StyledOverline,
  StyledOverlineLink,
} from './styles';
import { ETypography, ETypographyColor } from '../../types/theme';
import { useColors } from '../../hooks/useColors';

export const H1 = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledH1 className="h1" {...props} color={color} theme={colors}>
      {children}
    </StyledH1>
  );
};

export const H2 = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledH2 className="h2" {...props} color={color} theme={colors}>
      {children}
    </StyledH2>
  );
};

export const H3 = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledH3 className="h3" {...props} color={color} theme={colors}>
      {children}
    </StyledH3>
  );
};

export const H4 = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledH4 className="h4" {...props} color={color} theme={colors}>
      {children}
    </StyledH4>
  );
};

export const Body1Accented = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledBodyAccented
      className="body-accented"
      {...props}
      color={color}
      theme={colors}
    >
      {children}
    </StyledBodyAccented>
  );
};

export const Body1 = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledBody1 className="body-1" {...props} color={color} theme={colors}>
      {children}
    </StyledBody1>
  );
};

export const Body1Link = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledBody1Link
      className="body-1-link"
      {...props}
      color={color}
      theme={colors}
    >
      {children}
    </StyledBody1Link>
  );
};

export const CTA1 = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledCTA className="cta" {...props} color={color} theme={colors}>
      {children}
    </StyledCTA>
  );
};

export const Body2Accented = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledBody2Accented
      className="body-2-accented"
      {...props}
      color={color}
      theme={colors}
    >
      {children}
    </StyledBody2Accented>
  );
};

export const Body2 = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledBody2 className="body-2" {...props} color={color} theme={colors}>
      {children}
    </StyledBody2>
  );
};

export const Body2Link = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledBody2Link
      className="body-2-link"
      {...props}
      color={color}
      theme={colors}
    >
      {children}
    </StyledBody2Link>
  );
};

export const CTA2 = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledCTA2 className="cta-2" {...props} color={color} theme={colors}>
      {children}
    </StyledCTA2>
  );
};

export const CaptionAccented = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledCaptionAccented
      className="caption-accented"
      {...props}
      color={color}
      theme={colors}
    >
      {children}
    </StyledCaptionAccented>
  );
};

export const Caption = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledCaption className="caption" {...props} color={color} theme={colors}>
      {children}
    </StyledCaption>
  );
};

export const CaptionLink = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledCaptionLink
      className="caption-link"
      {...props}
      color={color}
      theme={colors}
    >
      {children}
    </StyledCaptionLink>
  );
};

export const CaptionCTA = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledCaptionCTA
      className="caption-cta"
      {...props}
      color={color}
      theme={colors}
    >
      {children}
    </StyledCaptionCTA>
  );
};

export const OverlineAccented = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledOverlinedAccented
      className="overline-accented"
      {...props}
      color={color}
      theme={colors}
    >
      {children}
    </StyledOverlinedAccented>
  );
};

export const Overline = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledOverline
      className="overline"
      {...props}
      color={color}
      theme={colors}
    >
      {children}
    </StyledOverline>
  );
};

export const OverlineLink = ({
  color,
  children,
  ...props
}: {
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  const { colors } = useColors();
  return (
    <StyledOverlineLink
      className="overline-link"
      {...props}
      color={color}
      theme={colors}
    >
      {children}
    </StyledOverlineLink>
  );
};

export const Typography = ({
  type,
  color,
  children,
  ...props
}: {
  type: ETypography;
  color: ETypographyColor;
  children: ReactNode | string;
}) => {
  switch (type) {
    case 'h1':
      return (
        <H1 color={color} {...props}>
          {children}
        </H1>
      );
    case 'h2':
      return (
        <H2 color={color} {...props}>
          {children}
        </H2>
      );
    case 'h3':
      return (
        <H3 color={color} {...props}>
          {children}
        </H3>
      );
    case 'h4':
      return (
        <H4 color={color} {...props}>
          {children}
        </H4>
      );
    case 'Body1Accented':
      return (
        <Body1Accented color={color} {...props}>
          {children}
        </Body1Accented>
      );
    case 'body1':
      return (
        <Body1 color={color} {...props}>
          {children}
        </Body1>
      );
    case 'body1Link':
      return (
        <Body1Link color={color} {...props}>
          {children}
        </Body1Link>
      );
    case 'cta1':
      return (
        <CTA1 color={color} {...props}>
          {children}
        </CTA1>
      );
    case 'body2Accented':
      return (
        <Body2Accented color={color} {...props}>
          {children}
        </Body2Accented>
      );
    case 'body2':
      return (
        <Body2 color={color} {...props}>
          {children}
        </Body2>
      );
    case 'body2Link':
      return (
        <Body2Link color={color} {...props}>
          {children}
        </Body2Link>
      );
    case 'cta2':
      return (
        <CTA2 color={color} {...props}>
          {children}
        </CTA2>
      );
    case 'captionAccented':
      return (
        <CaptionAccented color={color} {...props}>
          {children}
        </CaptionAccented>
      );
    case 'caption':
      return (
        <Caption color={color} {...props}>
          {children}
        </Caption>
      );
    case 'captionLink':
      return (
        <CaptionLink color={color} {...props}>
          {children}
        </CaptionLink>
      );
    case 'captionCTA':
      return (
        <CaptionCTA color={color} {...props}>
          {children}
        </CaptionCTA>
      );
    case 'overlineAccented':
      return (
        <OverlineAccented color={color} {...props}>
          {children}
        </OverlineAccented>
      );
    case 'overline':
      return (
        <Overline color={color} {...props}>
          {children}
        </Overline>
      );
    case 'overlineLink':
      return (
        <OverlineLink color={color} {...props}>
          {children}
        </OverlineLink>
      );
    default:
      return <Fragment />;
  }
};