import React, { type ReactElement, type ReactText } from 'react';
import { Text as RNText, type TextProps as RNTextProps } from 'react-native';
import { classNames } from '../utils';

export enum TextCategoryEnum {
  H1 = 'H1',
  H2 = 'H2',
  H3 = 'H3',
  H4 = 'H4',
  H5 = 'H5',
  H6 = 'H6',
  SMALL_PARAGRAPH = 'SMALL_PARAGRAPH',
  MEDIUM_PARAGRAPH = 'MEDIUM_PARAGRAPH',
  LARGE_PARAGRAPH = 'LARGE_PARAGRAPH',
}

export interface TextProps extends RNTextProps {
  children: ReactText | ReactElement<TextProps, any>;
  category?: TextCategoryEnum;
  className?: string;
}

export const Text: React.FC<TextProps> = (props) => {
  const {
    children,
    category = TextCategoryEnum.MEDIUM_PARAGRAPH,
    className,
    ...restOfProps
  } = props;

  return (
    <RNText
      className={classNames(
        'font-poppins-medium text-medium-paragraph',
        category === TextCategoryEnum.H1 ? 'font-roboto-black text-h1' : '',
        category === TextCategoryEnum.H2 ? 'font-roboto-black text-h2' : '',
        category === TextCategoryEnum.H3 ? 'font-roboto-black text-h3' : '',
        category === TextCategoryEnum.H4 ? 'font-roboto-black text-h4' : '',
        category === TextCategoryEnum.H5 ? 'font-roboto-black text-h5' : '',
        category === TextCategoryEnum.H6 ? 'font-roboto-black text-h6' : '',
        category === TextCategoryEnum.SMALL_PARAGRAPH
          ? 'font-poppins-light text-small-paragraph'
          : '',
        category === TextCategoryEnum.LARGE_PARAGRAPH
          ? 'font-poppins-semi-bold text-large-paragraph'
          : '',
        className
      )}
      {...restOfProps}
    >
      {children}
    </RNText>
  );
};