import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    Alert,
    BackHandler,
    Platform,
    ProgressBarAndroid, ActivityIndicator
} from 'react-native';
import PropTypes from 'prop-types';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {responsiveHeight, responsiveWidth, responsiveFontSize} from 'react-native-responsive-dimensions';
import {Fumi, Kaede} from 'react-native-textinput-effects'
import * as Animatable from 'react-native-animatable'
import Button from 'apsl-react-native-button'
import {categoryChild, getCodeInformation, getSupervisorInfoCode} from './../../webservice/AuthApi'

let theme = require('./../../utils/theme.json')
let route = require('./../../route.json')
import I18n from 'react-native-i18n';
import _ from "lodash";
import {getData, storeData} from "../../webservice/persistences/StorageService";
import {supervisorCode} from "../../webservice/IlinkConstants";

export default class CreateAccount extends Component {
    static navigatorStyle = {
        drawUnderNavBar: true,
        navBarHidden: true,
        drawUnderStatusBar: false,
        statusBarHidden: true,
        statusBarTextColorScheme: 'light',
    };

    static options(passProps) {
        return {
            topBar: {
                visible: false,
                enabled: false,
                drawBehind: true,

            },
            statusBar: {
                drawBehind: true,
                enabled: false,
            }
        }
    }

    constructor(props) {
        super(props);
        const {navigation} = this.props;
        this.type = navigation.getParam('type', 0);
        this.state = this.initState();


    }

    initState() {
        return {
            password: null,
            enterPhone: null,
            nameanim: null,
            surnameanim: null,
            passwordanim: null,
            confirmpassanim: null,
            isLoging: false,
            snackVisible: false,
            snackText: '',
            user: {category: this.type === 0 ? 'user' : 'geolocated'},
            displayFirstStep: true,
            displaySecondStep: false,
            showAlertIfIsOffline: this.type === 1,
            isRegisterOffline: false,
            displayLoader: false,
            codeSupervisorsData: null,
            codeSupervisorData: null

        }
    }

    componentDidMount() {
        if (this.state.showAlertIfIsOffline) {
            Alert.alert(
                I18n.t("REGISTER_OPTIONS"),
                I18n.t('WOULD_YOU_WANT_TO_REGISTER_OFFLINE')
                ,
                [
                    {
                        text: I18n.t("YES"), onPress: () => {
                            this.setState({showAlertIfIsOffline: false});
                        }
                    },
                    {
                        text: I18n.t("NO"), onPress: () => {
                            this.setState({isRegisterOffline: true, showAlertIfIsOffline: false});
                        }
                    }

                ],
                {cancelable: false}
            );
        }
    }

    renderCodeParrainField() {
        return (
            <ScrollView style={styles.container}>
                {this.state.displayLoader && this.renderLoader()}
                <View style={{flexDirection: "row"}}>
                    <Icon.Button name={"keyboard-backspace"}
                                 color={"white"}
                                 size={24}
                                 backgroundColor={'transparent'}
                                 onPress={() => this.props.navigation.pop()}
                    />
                    <Text style={styles.bigtitle}>{I18n.t('TEXT_BIG_CREATE_AGENT_1')}</Text>
                </View>
                <Text style={styles.subbigtitle}>{I18n.t('ENTER_SPONSOR_CODE')}</Text>

                <Animatable.View ref={(comp) => {
                    this.memberanim = comp
                }}>
                    <Fumi iconClass={FontAwesomeIcon}
                          iconName={'unlock-alt'}
                          label={I18n.t('CODE_PARRAIN')}
                          iconColor={'#f95a25'}
                          onChangeText={(text) => {
                              let use = this.state.user;
                              use.member = text;
                              this.setState({user: use})
                          }}

                          iconSize={20}
                          style={styles.input}
                    >
                    </Fumi>
                </Animatable.View>

                <Button style={styles.btnvalide}
                        textStyle={styles.textbtnvalide}
                        isLoading={this.state.isLoging}
                        onPress={() => {
                            this.checkCodeParrain()
                        }}>
                    {I18n.t('NEXT')}</Button>
                    <View style={{display: 'flex', flexDirection: 'column'}}>
          <Text style={styles.indication}>
            <Text style={styles.indicationTitle}>
              {I18n.t('HIERACHIC_CODE')} :
            </Text>{' '}
            {I18n.t('HIERACHIC_CODE_DESCRIPTION')}
          </Text>
          <Text style={styles.indication}>
            <Text style={styles.indicationTitle}>{I18n.t('TAX_CODE')} :</Text>{' '}
            {I18n.t('TAX_CODE_DESCRIPTION')}
          </Text>
        </View>
            </ScrollView>
        );
    }

    renderUserGeoAccount() {
        return (<ScrollView style={styles.container}>
            <View style={{flexDirection: "row"}}>
                <Icon.Button name={"keyboard-backspace"}
                             color={"white"}
                             size={24}
                             backgroundColor={'transparent'}
                             onPress={() => this.props.navigation.pop()}
                />
                <Text style={styles.bigtitle}>{I18n.t('TEXT_BIG_CREATE_AGENT_1')}</Text>
            </View>
            <Text style={styles.subbigtitle}>{I18n.t('TEXT_SUBTITLE_CREATE_1')}</Text>

            <Animatable.View ref={(comp) => {
                this.nameanim = comp
            }}>
                <Fumi iconClass={FontAwesomeIcon} iconName={'user'}
                      label={I18n.t('NAME')}
                      iconColor={'#f95a25'}
                      iconSize={20}
                      onChangeText={(text) => {
                          let use = this.state.user;
                          use.lastname = text;
                          this.setState({user: use})
                      }}
                      value={this.state.user.lastname}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>

            <Animatable.View ref={(comp) => {
                this.surnameanim = comp
            }}>
                <Fumi iconClass={FontAwesomeIcon} iconName={'user-md'}
                      label={I18n.t('ADDRESS')}
                      iconColor={'#f95a25'}
                      iconSize={20}
                      keyboardType={"email-address"}
                      style={styles.input}
                      value={this.state.user.address}
                      onChangeText={(text) => {
                          let use = this.state.user;
                          use.address = text;
                          this.setState({user: use})
                      }}

                >
                </Fumi>
            </Animatable.View>
            <Animatable.View ref={(comp) => {
                this.mailanim = comp
            }}>
                <Fumi iconClass={FontAwesomeIcon}
                      iconName={'envelope'}
                      label={I18n.t('EMAIL')}
                      keyboardType={"email-address"}
                      iconColor={'#f95a25'}
                      iconSize={20}
                      onChangeText={(text) => {
                          let use = this.state.user;
                          use.email = text;
                          this.setState({user: use})
                      }}

                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Animatable.View ref={(comp) => {
                this.passanim = comp
            }}>
                <Fumi iconClass={FontAwesomeIcon}
                      iconName={'lock'}
                      label={I18n.t('PASSWORD')}
                      iconColor={'#f95a25'}
                      secureTextEntry={true}
                      onChangeText={(text) => {
                          let use = this.state.user;
                          use.password = text;
                          this.setState({user: use})
                      }}
                      iconSize={20}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Animatable.View ref={(comp) => {
                this.confirmanim = comp
            }}>
                <Fumi iconClass={FontAwesomeIcon}
                      iconName={'lock'}
                      secureTextEntry={true}

                      label={I18n.t('CONFIRM_PASSWORD')}
                      iconColor={'#f95a25'}
                      onChangeText={(text) => {
                          let use = this.state.user;
                          use.confirmpass = text;
                          this.setState({user: use})
                      }}

                      iconSize={20}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Button style={styles.btnvalide}
                    textStyle={styles.textbtnvalide}
                    isLoading={this.state.isLoging}
                    onPress={() => {
                        this.checkUserGeolocated()
                    }}>
                {I18n.t('NEXT')}</Button>

        </ScrollView>)

    }

    renderUserAccount() {
        return (<ScrollView style={styles.container}>
            <View style={{flexDirection: 'row'}}>
                <Icon.Button name={"keyboard-backspace"}
                             color={"white"}
                             size={24}
                             backgroundColor={'transparent'}
                             onPress={() => this.props.navigation.pop()}
                />
                <Text style={styles.bigtitle}>{I18n.t('TEXT_BIG_CREATE_1')}</Text>
            </View>
            <Text style={styles.subbigtitle}>{I18n.t('TEXT_SUBTITLE_CREATE_1')}</Text>
            <Animatable.View ref={(comp) => {
                this.nameanim = comp
            }}>
                <Fumi iconClass={FontAwesomeIcon} iconName={'user'}
                      label={I18n.t('NAME')}
                      onChangeText={(text) => {
                          let use = this.state.user;
                          use.lastname = text;
                          this.setState({user: use})
                      }}
                      iconColor={'#f95a25'}
                      iconSize={20}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Animatable.View ref={(comp) => {
                this.surnameanim = comp
            }}>
                <Fumi iconClass={FontAwesomeIcon} iconName={'user-md'}
                      label={I18n.t('ADDRESS')}
                      iconColor={'#f95a25'}
                      iconSize={20}

                      keyboardType={"email-address"}
                      onChangeText={(text) => {
                          let use = this.state.user;
                          use.address = text;
                          this.setState({user: use})
                      }}

                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Animatable.View ref={(comp) => {
                this.mailanim = comp
            }}>
                <Fumi iconClass={FontAwesomeIcon}
                      iconName={'envelope'}
                      keyboardType={"email-address"}
                      label={I18n.t('EMAIL')}
                      iconColor={'#f95a25'}
                      iconSize={20}
                      onChangeText={(text) => {
                          let use = this.state.user;
                          use.email = text;
                          this.setState({user: use})
                      }}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Animatable.View ref={(comp) => {
                this.passanim = comp
            }}>
                <Fumi iconClass={FontAwesomeIcon}
                      iconName={'lock'}
                      label={I18n.t('PASSWORD')}
                      iconColor={'#f95a25'}
                      iconSize={20}
                      secureTextEntry={true}
                      onChangeText={(text) => {
                          let use = this.state.user;
                          use.password = text;
                          this.setState({user: use})
                      }}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>
            <Animatable.View ref={(comp) => {
                this.confirmanim = comp
            }}>
                <Fumi iconClass={FontAwesomeIcon}
                      iconName={'lock'}
                      secureTextEntry={true}
                      label={I18n.t('CONFIRM_PASSWORD')}
                      iconColor={'#f95a25'}
                      iconSize={20}
                      onChangeText={(text) => {
                          let use = this.state.user;
                          use.confirmpass = text;
                          this.setState({user: use})
                      }}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>

            <Button style={styles.btnvalide} textStyle={styles.textbtnvalide}
                    onPress={() => {
                        this._onUserCreateAccount()
                    }}>{I18n.t('NEXT')}</Button>

        </ScrollView>)
    }

    async _onUserCreateAccount() {
        let {user} = this.state;
       // console.log(user)
        if (user !== undefined) {
            if (this.checkOrShake(user.lastname, this.nameanim)) {
                if (this.checkOrShake(user.address, this.surnameanim)) {
                    if (this.checkOrShake(user.email, this.mailanim)) {
                        if (this.checkOrShake(user.password, this.passanim)) {
                            if (this.checkOrShake(user.confirmpass, this.confirmanim)) {
                                if (user.confirmpass === user.password) {
                                    this.props.navigation.push(route.creationstep2, {
                                        type: this.type,
                                        user: user
                                    });
                                } else {
                                    this.passanim.shake(800);
                                    this.confirmanim.shake(800);
                                }
                            }
                        }
                    }
                }
            }
        } else {
            /*this.props.navigator.showSnackbar({
                text:"impossible de trouvé l'utilisateur"
            })
            console.log(user)
        */
        }

    }

    checkUserGeolocated() {
        let {user} = this.state;
        this.setState({isLoging: true})
        if (user !== undefined) {
            if (this.checkOrShake(user.lastname, this.nameanim)) {
                if (this.checkOrShake(user.address, this.surnameanim)) {
                    if (this.checkOrShake(user.email, this.mailanim)) {

                        if (this.state.isRegisterOffline) {
                            if (!_.isNil(this.state.codeSupervisorData)) {

                                this.setState({isLoging: false});
                                if (this.state.codeSupervisorData.child !== undefined) {
                                    let user = this.state.user;
                                    user.category = this.state.codeSupervisorData.child;
                                    this.setState({user: user});
                                }

                                if (this.checkOrShake(user.password, this.passanim)) {
                                    if (this.checkOrShake(user.confirmpass, this.confirmanim)) {
                                        if (user.password === user.confirmpass) {
                                            this.props.navigation.push(route.creationstep2, {
                                                type: this.type,
                                                user: user,
                                                isOffline: this.state.isRegisterOffline,
                                                result: this.state.codeSupervisorData,

                                            });

                                        } else {
                                            this.passanim.shake(800)
                                            this.confirmanim.shake(800)
                                            this.setState({isLoging: false})
                                        }
                                    } else {
                                        this.setState({isLoging: false})
                                    }
                                } else this.setState({isLoging: false})

                            }
                        } else {
                            categoryChild(user.member).then(async (codes) => {
                               // console.log("CATEGORY", codes);
                                if (codes !== undefined && codes !== null && codes.child !== undefined) {
                                    let user = this.state.user;
                                    user.category = codes.child;
                                    this.setState({user: user});
                                }
                                this.setState({isLoging: false});
                                if (this.checkOrShake(user.password, this.passanim)) {
                                    if (this.checkOrShake(user.confirmpass, this.confirmanim)) {
                                        if (user.password === user.confirmpass) {
                                            this.props.navigation.push(route.creationstep2, {
                                                type: this.type,
                                                user: user,
                                                isOffline: this.state.isRegisterOffline
                                            });

                                        } else {
                                            this.passanim.shake(800)
                                            this.confirmanim.shake(800)
                                            this.setState({isLoging: false})
                                        }
                                    } else {
                                        this.setState({isLoging: false})
                                    }
                                } else this.setState({isLoging: false})

                            }).catch((e) => {
                                this.setState({isLoging: false})
                            })
                        }


                    } else this.setState({isLoging: false})

                } else this.setState({isLoging: false})

            } else this.setState({isLoging: false})

        } else {
            this.setState({isLoging: false});
            /*this.props.navigator.showSnackbar({
                text:"impossible de trouvé la variable user"
            })*/
           // console.log(user)
        }

    }

    retreiveSupervisorInfosCode() {
        getSupervisorInfoCode().then((result) => {
            console.warn("SUPERVISOR INFOS CODE", JSON.stringify(result));
            storeData(supervisorCode, JSON.stringify(result)).then(() => {
                this.setState({displayLoader: false});
            });
        }).catch(error => {
            //console.log(error);
        })
    }

    renderLoader() {
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                {Platform.OS === 'android'
                    ?
                    (
                        <>
                            <ProgressBarAndroid/>
                            <Text>{I18n.t('LOADING_DOTS')}</Text>

                        </>
                    ) :
                    <>
                        <ActivityIndicator size="large" color={'#ccc'}/>
                        <Text>{I18n.t('LOADING_DOTS')}</Text>
                    </>
                }
            </View>
        )
    }

    retreiveCodeInformation() {
        this.setState({isLoging: true});
        const membre = this.state.user.member;
        return new Promise(async (resolve, reject) => {
            try {
                let datas = await getCodeInformation(membre);
                resolve(datas);
            } catch (e) {
               // console.log("Erreur", e);
                this.setState({isLoging: false});
                Alert.alert(
                    I18n.t("UNABLE_TO_CONNECT_TITLE"),
                    I18n.t('IMPOSSIBLE_TO_CONNECT_INTERNET')
                    ,
                    [
                        {
                            text: I18n.t("NO"), onPress: () => {
                                BackHandler.exitApp();
                            }
                        },
                        {
                            text: I18n.t("YES"), onPress: () => {
                                this.retreiveSupervisorInfosCode();
                                this.setState({isLoging: false});
                            }
                        }

                    ],
                    {cancelable: false}
                );
                reject(e);
            }

        });

    }

    async checkCodeParrain() {
        let {user} = this.state;
        if (this.checkOrShake(user.member, this.memberanim)) {
            this.setState({isLoging: true});

            if (this.state.isRegisterOffline) {
                getData(supervisorCode).then(codeSupervisor => {
                    if (_.isNil(codeSupervisor)) {
                        Alert.alert(
                            I18n.t("ERROR_LABEL"),
                            I18n.t('DATA_NOT_SYNCHRONISED_WITH_SERVER')
                            ,
                            [
                                {
                                    text: I18n.t("NO"), onPress: () => {
                                        BackHandler.exitApp();
                                    }
                                },
                                {
                                    text: I18n.t("YES"), onPress: () => {
                                        this.setState({displayLoader: true});
                                    }
                                }

                            ],
                            {cancelable: false}
                        );
                    } else {

                        let codeSupervisorsData = JSON.parse(codeSupervisor);
                        let codeSupervisors = Object.keys(codeSupervisorsData);
                        this.setState({codeSupervisorsData});

                        if (!codeSupervisors.includes(user.member)) {
                            Alert.alert(I18n.t("ERROR_LABEL"), I18n.t('CODE_AGENT_NOT_EXIST')
                                , [{
                                    text: 'OK', onPress: () => {
                                        this.setState({isLoging: false});
                                        //this.props.navigation.goBack();
                                    }
                                }], {cancelable: false});
                        } else {
                            this.setState({isLoging: false});
                            let resultInfosCode = codeSupervisorsData[user.member];
                            this.setState({codeSupervisorData: resultInfosCode});

                            if (resultInfosCode.network.is_companies_network === "1" && resultInfosCode.child == "geolocated") {
                                this.props.navigation.push(route.createUserStep, {
                                    type: this.type,
                                    user: this.state.user,
                                    result: resultInfosCode,
                                    isActif: true,
                                    isOffline: this.state.isRegisterOffline
                                });
                            } else {
                                this.setState({
                                    displayFirstStep: false,
                                    displaySecondStep: true,
                                    isLoging: false,
                                });
                            }
                        }
                    }
                });
            } else {
                let result = {};
                try {
                    result = await this.retreiveCodeInformation();
                   // console.log("RESULTAT ", result);
                    if (_.isNil(result.error)) {
                        let resultInfosCode = await this.retreiveCodeInformation();
                        if (_.isNil(resultInfosCode.error)) {

                            this.setState({isLoging: false});
                            if (resultInfosCode.network.is_companies_network === "1" && resultInfosCode.child == "geolocated") {
                                this.props.navigation.push(route.createUserStep, {
                                    type: this.type,
                                    user: this.state.user,
                                    result: resultInfosCode,
                                    isActif: true,
                                    isOffline: this.state.isRegisterOffline
                                });
                            } else {
                                this.setState({
                                    displayFirstStep: false,
                                    displaySecondStep: true,
                                    isLoging: false
                                });
                            }

                        } else {
                            Alert.alert(I18n.t("ERROR_LABEL"), ""
                                , [{
                                    text: 'OK', onPress: () => {
                                    }
                                }], {cancelable: false});
                        }
                    } else {
                        if (result.error !== undefined) {
                            switch (result.error) {
                                case -7:
                                    Alert.alert(I18n.t("ERROR_LABEL"), result.error_msg
                                        , [{
                                            text: 'OK', onPress: () => {
                                                this.setState({isLoging: false});
                                                //this.props.navigation.goBack();
                                            }
                                        }], {cancelable: false})
                                    break;
                                default:
                                    Alert.alert(I18n.t("ERROR_LABEL"), ""
                                        , [{
                                            text: 'OK', onPress: () => {
                                                this.setState({isLoging: false});
                                                //this.props.navigation.goBack();
                                            }
                                        }], {cancelable: false});
                            }
                            this.setState({isLoading: false})
                        }
                    }

                } catch (e) {
                    result = false
                }
            }

        } else this.setState({isLoging: false});
    }

    checkOrShake(champ, view) {
        let res = false;
        if (champ !== undefined && champ.length > 0) {
            res = true;
        } else {
            view.shake(800)
        }
        return res;
    }

    render() {
        return this.type === 1 ?
            this.state.displayFirstStep ?
                this.renderCodeParrainField()
                : this.renderUserGeoAccount()
            : this.renderUserAccount()

    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.primaryDark,
    },
    textbtnvalide: {
        color: 'white',
        fontWeight: 'bold'
    },
    bigtitle: {
        color: 'white',
        fontSize: 20,
        flex: 1,
        fontWeight: 'bold',
        textAlign: 'center',
        margin: 20,
    },
    subbigtitle: {
        color: 'white',
        fontSize: 17,
        textAlign: 'center',
        margin: 5,
    },
    indication: {
        color: 'white',
        fontSize: 14,
        marginLeft: 20,
        marginRight: 20,
        marginBottom: 10,
      },
      indicationTitle: {
        color: 'white',
        fontSize: 14,
        marginLeft: 20,
        fontWeight: '600',
      },
    btnvalide: {
        marginTop: 20,
        marginLeft: 20,
        marginRight: 20,
        borderColor: 'transparent',
        backgroundColor: theme.accentLight,
        height: 52
    },
    input: {
        height: 60,
        marginTop: responsiveHeight(2),
        marginLeft: responsiveWidth(5),
        marginRight: responsiveWidth(5),
        borderRadius: 5,
    }
});