import React, { Component } from "react";
import { Image, ScrollView, Text, View, TouchableOpacity, TextInput, Keyboard, TouchableWithoutFeedback, Platform, ImageBackground, StyleSheet } from "react-native";
import { inject, observer } from "mobx-react"
import Loading from '../../components/Loading';
import { observable, makeObservable } from 'mobx'
import Toast, { DURATION } from 'react-native-easy-toast';
import { colors } from '../../assets/styles/colors-theme';
import { width, height } from '../../services/screen'
import { s, vs, ms, mvs } from 'react-native-size-matters';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons'
import I18n from '../../services/i18n'
import TitleBar from '../../components/titleBar'
Icon.loadFont();



const Setting = inject("appStore")(observer(class Setting extends React.Component {

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

            //  settingItems: observable
        });
    }

    userInfoPressAction() {
        if (this.store.logined) {
            this.props.navigation.navigate('Profile')
        } else {
            this.props.navigation.navigate('Signin')
        }
    }

    renderUserInfo() {

        return (
            <TouchableOpacity style={{ marginHorizontal: 40, marginVertical: 10, borderBottomWidth: 1, borderColor: colors.line2Color, height: 50, justifyContent: 'center', marginBottom: 40 }}
                onPress={() => { this.userInfoPressAction() }}>
                <Text style={styles.titleText}>
                    {this.store.logined ? (this.store.loginUserData?.display_name) : I18n.t('loginTitle')}
                </Text>
                <View style={{ position: 'absolute', right: 0 }}>
                    <Icon name='chevron-right' color={colors.fontColor} size={30} />
                </View>
            </TouchableOpacity>
        )
    }

    renderSettingList() {
        const settingItems = [{ id: 'news', name: 'news' }, { id: 'shop', name: 'storeInformation' }, { id: 'about', name: 'aboutSoya' },
        { id: 'privacyPolicy', name: 'privacyPolicyAndStatement' }, { id: 'loyaltyProgram', name: 'loyaltyProgramTermsAndConditions' }, { id: 'version', name: 'version' }]
        return (
            settingItems.map((item, index) => {
                console.log(this.store.lang)
                return (
                    this.renderListItem(item, index)
                )
            })
        )
    }

    settingItemsClickAction(id) {
        switch (id) {
            case 'order':
                this.store.getOrderHistory(this)
                break;
            case 'shop':
                this.props.navigation.navigate('StoreInfo')
                break;
            case 'about':
                this.props.navigation.navigate('About')
                break;
            case 'privacyPolicy':
                this.props.navigation.navigate('PrivacyPolicy')
                break;
            case 'loyaltyProgram':
                this.props.navigation.navigate('LoyaltyProgramTerms')
                break;
            case 'coupon':
                this.props.navigation.navigate('Coupons', { selectMode: false })
                break;
            case 'setting':
                this.props.navigation.navigate('AppSetting')
                break;
         
        }
    }

    renderListItem(item, index) {
        return (
            <TouchableOpacity style={{ marginHorizontal: 40, marginVertical: 10, borderBottomWidth: 1, borderColor: colors.line2Color, height: 50, justifyContent: 'center', }}
                onPress={() => { this.settingItemsClickAction(item.id) }}>
                <Text style={styles.titleText}>
                    {I18n.t(item.name)}
                </Text>
                <View style={{ position: 'absolute', right: 0 }}>
                    <Icon name='chevron-right' color={colors.fontColor} size={30} />
                </View>
            </TouchableOpacity>
        )
    }


    render() {
        console.log(this.store.lang)
        return (
            <ImageBackground resizeMode='cover' style={{ flex: 1, backgroundColor: colors.bgc }} source={require('../../assets/images/background.png')} >
                {/* <Loading loading={this.store.loading} /> */}
                <TitleBar navigation={this.props.navigation} back={false} user={true} />

                <ScrollView style={{ marginTop: s(70) }}>
                    {this.renderUserInfo()}
                    {this.renderSettingList()}
                </ScrollView>


                <Toast
                    ref="toast"
                    style={{ backgroundColor: colors.BORDER_PINK }}
                    position="center"
                    positionValue={200}
                    fadeInDuration={750}
                    fadeOutDuration={2000}
                    opacity={0.8}
                    textStyle={{ color: 'white' }}
                />
            </ImageBackground>

        );
    }
}))

const styles = StyleSheet.flatten({
    titleText: {
        color: colors.fontColor,
        fontSize: 13,
        fontWeight: '800'
    }
})

export default Setting
