import React from 'react';
import {
    SafeAreaView,
    Text,
    View,
    TouchableOpacity,
    StyleSheet,
    Image,
    ImageBackground,
    ScrollView
} from 'react-native';
var _ = require('lodash');
import { width, height } from '../../services/screen';
import { colors } from '../../assets/styles/colors-theme';
import Loading from '../../components/Loading';
import Toast, { DURATION } from 'react-native-easy-toast';
import { inject, observer } from "mobx-react"
import { Col, Grid, Row } from "react-native-easy-grid";
import TitleBar from '../../components/titleBar'
import { observable, makeObservable } from 'mobx'
import { WebView } from 'react-native-webview';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import ListTitle from '../../components/listTitle';
import I18n from '../../services/i18n'
import { s, vs, ms, mvs } from 'react-native-size-matters';
import { images } from '../../assets/images/imageIndex';
import RenderProducts from '../../components/renderProducts';
import HTMLView from 'react-native-htmlview';
import moment from 'moment';
import QRCode from 'react-native-qrcode-svg';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons'
const Profile = inject("appStore")(observer(class Profile extends React.Component {


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


        })
    }


    async componentWillMount() {

    }

    renderUserInfo() {
        return (
            <View style={{ width: width, alignItems: 'center', marginTop: 30 }}>
                <Text style={{ color: colors.textColor, fontSize: 16, fontWeight: '800' }}>
                    {this.store.loginUserData?.display_name}
                </Text>

                <Text style={{ color: colors.textColor, marginTop: 10 }}>
                    {this.store.loginUserData?.email}
                </Text>
                <Text style={{ color: colors.textColor, marginTop: 10 }}>
                    {I18n.t('cartPoints') + ": " + this.store.loginUserData?.points}
                </Text>

                <Text style={{ color: colors.textColor, marginTop: 20 }}>
                    {I18n.t('userId') + ": " + this.store.loginUserData?.id}
                </Text>
                <Text style={{ color: colors.textColor, marginTop: 10 }}>
                    {I18n.t('settingsPhoneNumber') + ": " + this.store.loginUserData?.mobile}
                </Text>

            </View>
        )
    }

    renderQrCode() {
        return (
            <View style={{ width: width, alignItems: 'center', marginTop: 30 }}>
                <QRCode
                    value={this.store.loginUserData?.id}
                    size={140}
                />
            </View>
        )
    }

    renderProfileSelection() {
        return (
            <View style={{ width: width, alignItems: 'center', marginTop: 30 }}>
                <TouchableOpacity style={{ width: width - 80, marginHorizontal: 40, marginVertical: 10, borderBottomWidth: 1, borderColor: colors.line2Color, height: 50, justifyContent: 'center', }}
                    onPress={() => { }}>
                    <Text style={styles.titleText}>
                        {I18n.t('EditUserInfo')}
                    </Text>
                    <View style={{ position: 'absolute', right: 0 }}>
                        <Icon name='chevron-right' color={colors.fontColor} size={30} />
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={{ width: width - 80, marginHorizontal: 40, marginVertical: 10, borderBottomWidth: 1, borderColor: colors.line2Color, height: 50, justifyContent: 'center', }}
                    onPress={() => { this.store.logoutPost(this) }}>
                    <Text style={styles.titleText}>
                        {I18n.t('settingsLogout')}
                    </Text>
                    <View style={{ position: 'absolute', right: 0 }}>

                    </View>
                </TouchableOpacity>
            </View>
        )
    }

    render() {
        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={true} user={false} />
                <View style={{ width: width, justifyContent: 'center', alignItems: 'center', marginTop: 40 }}>
                    <Image source={images.titleLogo} />
                </View>

                <ScrollView>
                    {this.renderUserInfo()}
                    {this.renderQrCode()}
                    {this.renderProfileSelection()}
                </ScrollView>
                <Toast
                    ref="toast"
                    style={{ backgroundColor: colors.mainColor }}
                    position="center"
                    positionValue={100}
                    fadeInDuration={750}
                    fadeOutDuration={2000}
                    opacity={0.8}
                    textStyle={{ color: 'white' }}
                />
            </ImageBackground>

        );
    }
}))
const styles = StyleSheet.create({
    titleText: {
        color: colors.fontColor,
        fontSize: 13,
        fontWeight: '800'
    },
    content: {
        margin: 20,
        br: { marginTop: -30, fontSize: 18, },
    },
});

export default Profile
