import React from 'react';
import { Platform, Text as RNText, TouchableOpacity, View } from 'react-native';
import { Spacer } from './spacer';

const BaseText = ({ children, align, inverse, onPress, }, styleId) => {
    const gstyles = global.ezstyles || {};
    let style = {};

    switch (styleId) {
        case 1:
            style = {
                color: (inverse ? gstyles.monospacedTextColorInverse || '#eee' : gstyles.monospacedTextColor || '#aaa'),
                fontFamily: (Platform.OS === 'ios') ? 'AmericanTypewriter' : 'Droid Sans Mono',
                fontSize: gstyles.monospacedTextFontSize || 18,
            };
            break;
        case 2:
            style = {
                color: (inverse ? gstyles.smallTextColorInverse || '#eee' : gstyles.smallTextColor || '#777'),
                fontFamily: gstyles.smallTextFontFamily,
                fontSize: gstyles.smallTextFontSize || 12,
            };
            break;
        case 3:
            style = {
                color: (inverse ? gstyles.subtitleColorInverse || '#fff' : gstyles.subtitleColor || '#000'),
                fontFamily: gstyles.subtitleFontFamily,
                fontSize: gstyles.subtitleFontSize || 24,
            };
            break;
        case 4:
            style = {
                color: (inverse ? gstyles.textColorInverse || '#eee' : gstyles.textColor || '#777'),
                fontFamily: gstyles.textFontFamily,
                fontSize: gstyles.textFontSize || 18,
            };
            break;
        case 5:
            style = {
                color: (inverse ? gstyles.titleColorInverse || '#fff' : gstyles.titleColor || '#000'),
                fontFamily: gstyles.titleFontFamily,
                fontSize: gstyles.titleFontSize || 30,
            };
    }
    
    if (align === 'center' || align === 'right') {
        style.textAlign = align;
    }
    
    let view = (
        <View>
            <RNText style={style}>{children}</RNText>
            <Spacer /> 
        </View>
    );

    if (onPress) {
        view = <TouchableOpacity onPress={onPress}>{view}</TouchableOpacity>;
    }
    
    return view;
};

const MonospacedText = ({ children, align, inverse, onPress }) => BaseText({children, align, inverse, onPress }, 1);
const SmallText = ({ children, align, inverse, onPress }) => BaseText({children, align, inverse, onPress }, 2);
const Subtitle = ({ children, align, inverse, onPress }) => BaseText({children, align, inverse, onPress }, 3);
const Text = ({ children, align, inverse, onPress }) => BaseText({children, align, inverse, onPress }, 4);
const Title = ({ children, align, inverse, onPress }) => BaseText({children, align, inverse, onPress }, 5);

export { MonospacedText, SmallText, Subtitle, Text, Title };
