// @flow
import React from 'react';
import { Text, StyleSheet } from 'react-native';
import styles from './Typography.styles';

type Props = {
  color: string,
  text: string,
  size: ?number,
  type: 'display4' | 'display3' | 'display2' | 'display1' | 'headline' | 'title' | 'subheading' | 'body1' | 'body2' | 'caption' | 'button',
}

class Typography extends React.Component<Props> {
  static defaultProps = {
    color: '#000',
    size: null,
    type: 'body1',
    text: '',
  }

  setNativeProps = (nativeProps: Object) => {
    if (this.elem) {
      this.elem.setNativeProps(nativeProps);
    }
  }

  elem: ?Text

  render() {
    const { color, size, text, type } = this.props;
    let role;
    const typographyStyles = StyleSheet.flatten([
      styles.text,
      styles[type],
      color && { color },
      size && { fontSize: size },
    ]);

    switch (type) {
      case 'display1':
      case 'display2':
      case 'display3':
      case 'display4':
      case 'headline':
      case 'title':
      case 'subheading':
        role = 'heading';
        break;
      default:
        role = null;
    }
    const label = type !== 'button' ? text : text.toUpperCase();

    return (
      <Text
        style={typographyStyles}
        accessibilityRole={role}
        ref={(elem) => { this.elem = elem; }}
      >
        {label}
      </Text>
    );
  }
}

export default Typography;
