import * as React from 'react';
import {
  Headline,
  Paragraph,
  Subheading,
  Caption,
  withTheme,
  Text,
} from 'react-native-paper';

function MyText(props) {
  const { type, size, children, bold, center, more } = props;
  let { color, theme, style } = props;
  const { colors } = theme;
  if (type) {
    color = colors[type];
  }

  if (color) {
    theme = {
      ...theme,
      colors: {
        ...theme.colors,
        text: color,
      },
    };
  } else {
    theme = {
      ...theme,
      colors: {
        ...theme.colors,
        text: '#000',
      },
    };
  }

  if (bold) {
    style = {
      ...style,
      fontWeight: 'bold',
    };
  }
  if (center) {
    style = {
      ...style,
      textAlign: 'center',
    };
  }

  let lineProps = {
    numberOfLines: 1,
    ellipsizeMode: 'tail',
  };

  if (more) {
    lineProps = {};
  }

  if (children) {
    switch (size) {
      case 'h1':
        // 24
        return (
          <Headline
            theme={theme}
            style={{ ...style }}
            align="center"
            {...lineProps}
          >
            {children}
          </Headline>
        );
      case 's1':
        // 16
        return (
          <Subheading theme={theme} style={{ ...style }} {...lineProps}>
            {children}
          </Subheading>
        );
      case 'c1':
        // 12
        return (
          <Text
            theme={theme}
            style={[{ fontSize: 12 }, style]}
            numberOfLines={1}
            ellipsizeMode="tail"
          >
            {children}
          </Text>
        );
      case 'c2':
        // 10
        return (
          <Text theme={theme} style={[{ fontSize: 10 }, style]} {...lineProps}>
            {children}
          </Text>
        );
      default:
        // 14
        return (
          <Paragraph theme={theme} {...lineProps} style={{ ...style }}>
            {children}
          </Paragraph>
        );
    }
  } else {
    return <></>;
  }
}

export default withTheme(MyText);