import React, { Component } from 'react';
import { View, Text, TextInput, TouchableOpacity, Platform, StyleSheet } from 'react-native';
import { colors } from '../assets/styles/colors-theme';
import Icon from 'react-native-vector-icons/FontAwesome';
import { width, height } from '../services/screen';
import SettingButton from './settingButton'
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
Icon.loadFont();
const Setting = inject("appStore")(observer(class Setting extends React.Component {

    constructor(props) {
        super(props);
        this.store = props.appStore;
    }
    render() {
        return (
            <View style={{ flexDirection: 'row' }}>
                <View style={{ flex: 1, justifyContent: 'center', }}>

                    <Text style={{ marginLeft: 40 }}>
                        {this.store.user != null ? this.store.user.user.name : ''}
                    </Text>
                </View>
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-end' }}>
                    {this.props.settingViewAble ? (<View style={{ backgroundColor: 'white', justifyContent: 'center', alignItems: 'center', position: 'absolute', right: 0, bottom: 5, width: width / 4, height: height / 2, borderWidth: 1, borderColor: colors.buttonColor, borderTopLeftRadius: 20, borderBottomLeftRadius: 20 }}>
                        {this.store.user != null ? (<View style={{ justifyContent: 'center', alignItems: 'center' }}>
                            <TouchableOpacity style={styles.langButton} onPress={() => { this.store.logout(this.props.self) }}>
                                <Text style={[styles.buttonText, { color: 'white' }]}>
                                    {this.store.text.logout}
                                </Text>
                            </TouchableOpacity>
                            <View style={{ width: width / 5, marginTop: 40, height: 2, backgroundColor: colors.buttonColor }} /></View>) : (<View />)}


                        <View style={styles.settingButtonStyle}>
                            <Text style={styles.buttonText}>
                                {this.store.text.language}
                            </Text>
                        </View>
                        <TouchableOpacity style={styles.langButton}
                            onPress={() => { this.store.changeLanguage('hk'); this.props.self.lang = 'hk' }}>
                            <Text style={[styles.buttonText, { color: 'white' }]}>
                                {'中'}
                            </Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.langButton} onPress={() => { this.store.changeLanguage('en'); this.props.self.lang = 'en' }}>
                            <Text style={[styles.buttonText, { color: 'white' }]}>
                                {'ENG'}
                            </Text>
                        </TouchableOpacity>
                    </View>) : (<View />)
                    }
                    <View style={{ marginRight: 40 }}>
                        <SettingButton onPress={() => this.props.onPress && this.props.onPress()} />
                    </View>
                </View >
            </View >
        );
    }
}))

const styles = StyleSheet.create({
    settingButtonStyle: {
        marginTop: 20
    },
    buttonText: {
        fontSize: 20,
        color: colors.buttonColor
    },

    langButton: {
        marginTop: 20,
        width: 100,
        height: 40,
        backgroundColor: colors.buttonColor,
        borderRadius: 14,
        justifyContent: 'center',
        alignItems: 'center'
    }
});
export default Setting;
