import React, { ComponentType } from 'react';
import { StyleSheet, Text as NativeText, TextStyle, StyleProp } from 'react-native';

import { ThemeType } from '../themes/hero';
import { useTheme } from './ThemeContext';

export type weight = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | 'bold' | 'normal';

export type ellipsizeMode = 'tail' | 'head' | 'clip' | 'middle';

export type size = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';

export type Props = {
  readonly children: React.ReactNode;
  readonly color?: string;
  readonly ellipsizeMode?: ellipsizeMode;
  readonly numberOfLines?: number;
  readonly onPress?: () => void;
  readonly size?: size;
  readonly style?: StyleProp<TextStyle>;
  readonly testID?: string;
  readonly weight?: weight;
};

const getHeadingStyle = (size: size | undefined, theme: ThemeType) => {
  switch (size) {
    case 'h1':
    case 'h2':
    case 'h3':
    case 'h4':
    case 'h5':
      return theme.text[size];
    default:
      return {};
  }
};

const Text: ComponentType<Props> = ({
  children,
  color,
  ellipsizeMode,
  numberOfLines,
  onPress,
  size,
  style,
  testID,
  weight = '400',
}: Props) => {
  const theme = useTheme();

  return (
    <NativeText
      testID={testID}
      ellipsizeMode={ellipsizeMode}
      numberOfLines={numberOfLines}
      onPress={onPress}
      style={StyleSheet.flatten([
        theme.text.text,
        getHeadingStyle(size, theme),
        { fontWeight: weight },
        color ? { color: color } : {},
        style || {},
      ])}
    >
      {children}
    </NativeText>
  );
};

export default Text;