import React from 'react';
import { SafeAreaView, Text, Image, Alert, Linking, View, TouchableOpacity, StyleSheet, TextInput } from 'react-native';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
import { width, height } from '../../services/screen';
import { images } from '../../assets/images/imageIndex';
import Loading from '../../components/Loading'
import Toast, { DURATION } from 'react-native-easy-toast';
import CustomTextInput from '../../components/customTextInput';
import CustomLoginButton from '../../components/customLoginButton'
import SettingButton from '../../components/settingButton'
import { getStatusBarHeight } from 'react-native-status-bar-height';
import FastImage from 'react-native-fast-image'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import AsyncStorage from '@react-native-community/async-storage';
import { colors } from '../../assets/styles/colors-theme';
import Setting from '../../components/setting'
const Login = inject("appStore")(observer(class Login extends React.Component {


    lang = this.props.appStore.lanuageSelection

    loginUserData = {
        id: '',
        pwd: '',
    };

    settingViewAble = false

    constructor(props) {
        super(props);
        this.store = props.appStore;
        makeObservable(this, {
            lang: observable,

            loginUserData: observable,

            settingViewAble: observable,

        })
    }
    async componentDidMount() {

    }


    loginAction() {
        if (this.loginUserData.id != '') {
            if (this.loginUserData.pwd != '') {
                this.store.login(this.loginUserData, this)
            } else {
                this.refs.toast.show(this.store.text.pleaseEnterPassword)
            }
        } else {
            this.refs.toast.show(this.store.text.pleaseInputFirstName)
        }
    }



    render() {
        return (
            <SafeAreaView
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: 'white',
                }}>
                <Loading loading={this.store.loading} />
                <KeyboardAwareScrollView>

                    <View style={{ flex: 0.9, alignItems: 'center', marginTop: Platform.OS === 'ios' ? 0 : getStatusBarHeight(), }}>
                        <Image style={{ marginTop: 100 }} source={images.login.logo} />
                      
                     
                        <View style={{ width: width / 3, marginTop: 40 }}>
                            <CustomTextInput
                                title={this.store.text.firstName}
                                value={this.loginUserData.id}
                                onChangeText={text => {
                                    this.loginUserData.id = text;
                                }}
                                returnKeyType={'next'}
                                secureTextEntry={false}

                            />
                            <CustomTextInput
                                title={this.store.text.password}
                                value={this.loginUserData.pwd}
                                onChangeText={text => {
                                    this.loginUserData.pwd = text;
                                }}
                                returnKeyType={'done'}
                                secureTextEntry={true}

                            />
                            <TextInput />
                            <View style={{ marginTop: 40 }}>

                            </View>
                            <CustomLoginButton title={this.store.text.login} width={3} onPress={() => { this.loginAction() }} />
                        </View>

                    </View>
                </KeyboardAwareScrollView>
                {/* {this.settingViewAble ? (<View style={{ justifyContent: 'center', alignItems: 'center', position: 'absolute', right: 0, bottom: 20, width: width / 3.5, height: height / 1.7, borderWidth: 1, borderColor: colors.buttonColor, borderTopLeftRadius: 20, borderBottomLeftRadius: 20 }}>
                    <TouchableOpacity style={styles.settingButtonStyle}>
                        <Text style={styles.buttonText}>
                            {this.store.text.newStaffSignUp}
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.settingButtonStyle}>
                        <Text style={styles.buttonText}>
                            {this.store.text.forgotPassword}
                        </Text>
                    </TouchableOpacity>
                    <View style={{ width: width / 5, marginTop: 40, height: 2, backgroundColor: colors.buttonColor }} />
                    <View style={styles.settingButtonStyle}>
                        <Text style={styles.buttonText}>
                            {this.store.text.language}
                        </Text>
                    </View>
                    <TouchableOpacity style={styles.langButton} >
                        <Text style={[styles.buttonText, { color: 'white' }]}>
                            {'中'}
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.langButton} >
                        <Text style={[styles.buttonText, { color: 'white' }]}>
                            {'ENG'}
                        </Text>
                    </TouchableOpacity>
                </View>) : (<View />)} */}
                <View style={{ flex: 0.1, justifyContent: 'center', alignItems: 'center', }}>


                    <Setting self={this} settingViewAble={this.settingViewAble} onPress={() => { this.settingViewAble = !this.settingViewAble }} />

                </View>
                <Toast
                    ref="toast"
                    style={{ backgroundColor: colors.buttonColor }}
                    position="bottom"
                    positionValue={200}
                    fadeInDuration={750}
                    fadeOutDuration={2000}
                    opacity={0.8}
                    textStyle={{ color: 'white' }}
                />
            </SafeAreaView>
        );
    }
}))
const styles = StyleSheet.create({
    settingButtonStyle: {
        marginTop: 40
    },
    buttonText: {
        fontSize: 20,
        color: colors.buttonColor
    },

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

export default Login