import React, {Component} from 'react';
import {
    Alert,
    Keyboard,
    PermissionsAndroid,
    Platform,
    ProgressBarAndroid,
    ScrollView,
    StyleSheet,
    Text,
    View
} from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
import {Fumi} from 'react-native-textinput-effects'
import * as Animatable from 'react-native-animatable';
import Button from 'apsl-react-native-button';
import I18n from 'react-native-i18n';
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import {Color} from '../../config/Color';
import DateTimePicker from '@react-native-community/datetimepicker';
import {Dropdown} from 'react-native-material-dropdown';
import {getPositionInformation} from './../../webservice/MapService';
import {ProgressDialog} from 'react-native-simple-dialogs';
import {getListCountriesActive, getTownInformationName, readUser} from './../../webservice/AuthApi';
import {MaterialDialog} from "react-native-material-dialog";
import Geolocation from 'react-native-geolocation-service';
import {identityPieces} from '../../utils/UtilsFunction';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {
    createIndentificationAction,
    createIndentificationResetAction,
    getUserIdentificationAction
} from '../../webservice/IdentificationApi';
import SwitchSelector from "react-native-switch-selector";

let theme = require('./../../utils/theme.json');
let route = require('./../../route.json');
const GEOLOCATION_OPTIONS = {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, useSignificantChanges: true};
const moment = require('moment');

class CreateIdentificationUser extends Component {
    static navigatorStyle = {
        navBarBackgroundColor: Color.primaryColor,
        statusBarColor: Color.primaryDarkColor,
        navBarTextColor: '#FFFFFF',
        navBarButtonColor: '#FFFFFF'

    };

    static navigationOptions = () => {
        return {
            drawerLabel: () => null,
            headerTitle: I18n.t('CREATION_IDENTIFICATION_DESCRIPTION'),
            headerTintColor: 'white',
            headerStyle: {
                backgroundColor: Color.primaryColor,
                marginTop: 0,
                color: 'white'
            },
            headerTitleStyle: {
                color: "white"
            },
            title: I18n.t('CREATION_IDENTIFICATION_DESCRIPTION')
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            lastname: '',
            numeroIdentite: null,
            dateNaissance: null,
            dateExpiration: null,
            networksinglePickerVisible: false,
            isLoging: false,
            countries: [],
            town: [],
            townName: null,
            country: null,
            identityPieces: identityPieces(),
            identityPiecesName: I18n.t((identityPieces()[0]).name),
            snackVisible: false,
            snackText: '',
            disableNetwork: false,
            networks: [],
            showPickerDateNaissance: false,
            showPickerDateExpiration: false,
            modalVisible: true,
            select_network: I18n.t("SELECT_NETWORK"),
            user: null,
            triggerSubmitClick: false,
            sexe: [
                {label: I18n.t('MASCULIN'), value: "M"},
                {label: I18n.t('FEMININ'), value: "F"},
            ],
            gender: 'M'
        };
        this.dateNaissanceFumiProps = {};
        this.dateExpirationFumiProps = {};
        this.props.createIndentificationResetAction();
    }

    componentDidMount() {

        readUser().then((user) => {
            if (user) {
                if (user !== undefined) {
                    let firstname = user.firstname !== null ? user.firstname : '';
                    this.setState({
                        user,
                        lastname: `${firstname} ${user.lastname}`
                    });
                }
            }
        });

        if (Platform.OS === 'android') {
            this.requestCameraPermission();
        } else {
            this.watchLocation();
        }

    }

    renderCreateIdentificationResponse() {
        const {result, error} = this.props;

        console.log("PROPS", this.props);

        if (result !== null) {
            if (typeof result.response !== 'undefined') {
                Alert.alert(
                    I18n.t('SUCCESS_IDENTIFICATION'),
                    result.response,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                this.props.createIndentificationResetAction();
                                this.props.getUserIdentificationAction(this.state.user.phone);
                                this.setState({triggerSubmitClick: false});
                                this.props.navigation.pop();
                            }
                        }

                    ],
                    {cancelable: false}
                )
            }
        }

        if (error !== null) {
            if (typeof error.data !== 'undefined') {
                Alert.alert(
                    I18n.t('ERROR_IDENTIFICATION'),
                    error.data.error,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                this.props.createIndentificationResetAction();
                                this.setState({triggerSubmitClick: false});
                            }
                        }

                    ],
                    {cancelable: false}
                )
            } else {
                Alert.alert(
                    I18n.t('ERROR_IDENTIFICATION'),
                    JSON.stringify(error),
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                this.props.createIndentificationResetAction();
                            }
                        }

                    ],
                    {cancelable: false}
                )
            }
        }
    }


    componentWillUpdate(nextProps, nextState) {
        let dateNaissance = nextState.dateNaissance || new Date();

        if (this.state.showPickerDateNaissance)
            this.dateNaissanceFumiProps.value = moment(dateNaissance).format('DD-MM-YYYY');
        if (this.state.showPickerDateExpiration)
            this.dateExpirationFumiProps.value = moment(nextState.dateExpiration).format('DD-MM-YYYY');
    }

    componentWillUnmount() {
        this.mounted = false;
        if (this.watchID) Geolocation.clearWatch(this.watchID);
    }

    showErrorDialog() {
        this.setState({modalDialog: false})
        Aler.alert("Une erreur est survenue", "Impossible de récuperer des informations du pays verifier que votre gps est activé," +
            "et que vous êtes connecté à internet puis ressayer", [{
            text: "Recommencer", onPress: () => {
                this.watchLocation()
            }
        }, {
            text: "Annuler", onPress: () => {
                this.props.navigation.popToTop()
            }
        }])
    }

    async watchLocation() {
        Geolocation.getCurrentPosition((position) => {
            this.treatPosition(position)
        }, (e) => {
            this.showErrorDialog()
        }, this.props.geolocationOptions);
        if (!this.watchID) {
            Geolocation.watchPosition((position) => {
                this.treatPosition(position)
            }, (e) => {
                this.showErrorDialog()
            }, this.props.geolocationOptions)
        }
    }

    async requestCameraPermission() {
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
                {
                    'title': 'Cool Photo App Camera Permission',
                    'message': 'Cool Photo App needs access to your camera ' +
                        'so you can take awesome pictures.'
                }
            )
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                this.watchLocation();
            } else {
                this.setState({modalDialog: false})
                Alert.alert("Echec à l'autorisation",
                    "L'application n'est pas autorisé à acceder à votre position veuillez verifier que votre GPS est activé et configurer en mode Haute Precision",
                    [{
                        text: "Ok", onPress: () => {
                            this.props.navigation.popToTop()
                        }
                    }])
            }
        } catch (err) {
            this.setState({modalDialog: false})
            Alert.alert("Une erreur est Survenue",
                "Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application",
                [{
                    text: "Ok", onPress: () => {
                        BackHandler.exitApp()
                    }
                }])
        }
    }

    treatPosition(position) {
        const myLastPosition = this.state.myPosition;
        const myPosition = position.coords;

        if (!isEqual(myPosition, myLastPosition)) {
            getPositionInformation(myPosition).then((response) => {
                if (response.results !== undefined) {
                    if (response.results.length > 0) {
                        let most = response.results[0]
                        let {address_components, formatted_address, place_id} = most
                        this.setState({address: address_components, textadress: formatted_address, place: place_id})

                        let results = response.results;
                        let shortcountry;
                        let mcountry;
                        for (let i = 0; i < results[0].address_components.length; i++) {
                            for (let j = 0; j < results[0].address_components[i].types.length; j++) {
                                if (results[0].address_components[i].types[j] === "country") {
                                    mcountry = results[0].address_components[i];
                                    shortcountry = mcountry.short_name;
                                    this.setState({shortCountry: mcountry.short_name, longCountry: mcountry.long_name})
                                } else if (results[0].address_components[i].types[j] === "locality") {
                                    const name = results[0].address_components[i].short_name;
                                    this.setState({townName: name});
                                    getTownInformationName(name).then((result) => {
                                        let town = null;
                                        if (result instanceof Array) {
                                            town = result[0];
                                        } else {
                                            town = result;
                                        }

                                        this.setState({modalVisible: false, town: new Array(town)});
                                    })
                                }
                            }
                        }
                        getListCountriesActive().then((cnt) => {
                            this.setState({countries: cnt})
                            console.debug(cnt, shortcountry);
                            var found = false
                            for (let i of cnt) {
                                if (i.code_country === shortcountry) {
                                    found = true;
                                    this.setState({modalVisible: false, country: i.name})
                                    /*                                              this.getNetworks(i.code_dial); */
                                }
                            }
                            if (!found) {
                                Alert.alert("Impossible de recupérer vos informations", "Nous n'avons pas pu recuperer les informations de votre pays veuillez contacter les administrateurs", [{text: "OK"}]);

                            }
                        })


                    }

                }
            }).catch((e) => {
                this.showErrorDialog()
            });
            this.setState({myPosition: myPosition});
            /*                if (this.mapRef !== undefined && this.mapRef !== null) {
                                this.mapRef.animateToCoordinate({
                                     latitude: myPosition.latitude,
                                     longitude: myPosition.longitude
                                }, 1000);
                                this.mapRef.animateToRegion({
                                     latitude: myPosition.latitude,
                                     longitude: myPosition.longitude,
                                     latitudeDelta: 0.03,
                                     longitudeDelta: 0.01,
                                }, 1000)
                           } */
        }

    }


    onChangeDateNaissance = (event, selectedDate) => {
        let dateNaissance = isNil(this.state.dateNaissance) ? new Date() : this.state.dateNaissance;
        const currentDate = selectedDate || dateNaissance;
        this.setState({
            showPickerDateNaissance: Platform.OS === 'ios' || false,
            dateNaissance: currentDate,
        });
    };

    onChangeDateExpiration = (event, selectedDate) => {
        let dateExpiration = isNil(this.state.dateExpiration) ? new Date() : this.state.dateExpiration;
        const currentDate = selectedDate || dateExpiration;
        this.setState({
            showPickerDateExpiration: Platform.OS === 'ios' || false,
            dateExpiration: currentDate,
        });
    };

    ckeckIfFieldIsOK(champ) {
        return (isNil(champ) || isEqual(champ.length, 0));
    }

    onSubmitIdentityClient = () => {
        const {
            lastname,
            numeroIdentite,
            dateNaissance,
            dateExpiration,
            country,
            townName,
            identityPiecesName
        } = this.state;

        if (this.ckeckIfFieldIsOK(lastname))
            this.lastnameAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(dateNaissance))
            this.datenaissanceAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(country))
            this.countryAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(townName))
            this.townAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(identityPiecesName))
            this.identityPiecesAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(numeroIdentite))
            this.numeroIdentiteAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(dateExpiration))
            this.identityDateExpiryAnim.shake(800);
        else {
            this.props.createIndentificationAction({
                lastname: this.state.lastname,
                firstname: "",
                birth_date: moment(this.state.dateNaissance).format('DD-MM-YYYY'),
                town: this.state.townName,
                country: this.state.country,
                identity_document: this.state.identityPiecesName,
                id_identity_document: this.state.numeroIdentite,
                expiry_date_document: moment(this.state.dateExpiration).format('DD-MM-YYYY'),
                phone_number: null,
                id_user: this.state.user.id,
                gender: this.state.gender
            });
        }
        this.setState({
            triggerSubmitClick: true
        })

    }

    renderLoaderModal() {
        return (
            <MaterialDialog
                visible={this.state.modalVisible}
                title={I18n.t("LOADING_INFO")}>
                <View style={{justifyContent: 'center', alignItems: 'center'}}>
                    <Text>{I18n.t("LOADING_DESCRIPTION_COUNTRY")}</Text>
                    <ProgressBarAndroid/>
                </View>
            </MaterialDialog>)
    }

    renderLoader = () => {
        return (
            <ProgressDialog
                visible={this.props.loading}
                title={I18n.t('LOADING')}
                message={I18n.t('LOADING_INFO')}
            />
        )
    }

    renderDateNaissancePicker = () => {
        return (
            <DateTimePicker
                testID="dateTimePicker"
                timeZoneOffsetInMinutes={0}
                is24Hour={true}
                value={isNil(this.state.dateNaissance) ? new Date() : this.state.dateNaissance}
                mode='date'
                maximumDate={new Date()}
                display="spinner"
                onChange={this.onChangeDateNaissance}
            />
        );
    }

    renderDateExpirationPicker = () => {
        return (
            <DateTimePicker
                testID="dateTimePicker"
                timeZoneOffsetInMinutes={0}
                is24Hour={true}
                value={isNil(this.state.dateExpiration) ? new Date() : this.state.dateExpiration}
                mode='date'
                maximumDate={new Date(2300, 10, 20)}
                display="spinner"
                onChange={this.onChangeDateExpiration}
            />
        );
    }

    render() {
        console.log("STATE", this.state);
        return (
            <>
                {this.state.showPickerDateNaissance && this.renderDateNaissancePicker()}
                {this.state.showPickerDateExpiration && this.renderDateExpirationPicker()}
                {this.state.modalVisible && this.renderLoaderModal()}
                {this.props.loading && this.renderLoader()}
                {this.state.triggerSubmitClick && this.renderCreateIdentificationResponse()}
                <ScrollView style={styles.container}>
                    <Text style={styles.subbigtitle}>{I18n.t('CREATE_IDENTIFICATION_TITLE')}</Text>
                    <Animatable.View ref={(comp) => {
                        this.lastnameAnim = comp
                    }}>
                        <Fumi iconClass={FontAwesomeIcon} iconName={'user'}
                              label={`${I18n.t('NAME')} ${I18n.t('AND')} ${I18n.t('FIRSTNAME')}`}
                              iconColor={'#f95a25'}
                              iconSize={20}
                              value={this.state.lastname}
                              onChangeText={(lastname) => {
                                  this.setState({lastname})
                              }}
                              style={styles.input}
                        >
                        </Fumi>
                    </Animatable.View>
                    <Animatable.View ref={(comp) => {
                        this.datenaissanceAnim = comp
                    }}>
                        <Fumi iconClass={FontAwesomeIcon} iconName={'calendar'}
                              label={I18n.t('DATE_NAISSANCE')}
                              iconColor={'#f95a25'}
                              iconSize={20}
                              style={styles.input}
                              onFocus={() => {
                                  Keyboard.dismiss();
                                  this.setState({showPickerDateNaissance: true})
                              }}
                              {...this.dateNaissanceFumiProps}>
                        </Fumi>
                    </Animatable.View>
                    <Animatable.View ref={(comp) => {
                        this.countryAnim = comp
                    }}
                                     style={{
                                         width: responsiveWidth(90),
                                         height: 60,
                                         marginTop: 20,
                                         alignSelf: 'center',
                                         borderRadius: 10,
                                         paddingLeft: 20,
                                         paddingRight: 20,
                                         backgroundColor: 'white'
                                     }}>
                        <Dropdown
                            label={I18n.t('COUNTRY_CHOICE')}
                            data={this.state.countries}
                            useNativeDriver={true}
                            value={this.state.country === null ? "" :
                                this.state.country}
                            onChangeText={(value, index, data) => {
                                this.setState({country: value});
                            }}
                            valueExtractor={(value) => {
                                return value.name
                            }}
                            labelExtractor={(value) => {
                                return value.name
                            }}
                        />
                    </Animatable.View>
                    <Animatable.View ref={(comp) => {
                        this.townAnim = comp
                    }}
                                     style={{
                                         width: responsiveWidth(90),
                                         height: 60,
                                         marginTop: 20,
                                         alignSelf: 'center',
                                         borderRadius: 10,
                                         paddingLeft: 20,
                                         paddingRight: 20,
                                         backgroundColor: 'white'
                                     }}>
                        <Dropdown
                            label={I18n.t('CHOICE_TOWN')}
                            data={this.state.town}
                            useNativeDriver={true}
                            value={this.state.townName === null ? "" :
                                this.state.townName}
                            onChangeText={(value, index, data) => {
                                this.setState({townName: value});
                            }}
                            valueExtractor={(value) => {
                                return value.name
                            }}
                            labelExtractor={(value) => {
                                return value.name
                            }}
                        />
                    </Animatable.View>
                    <Animatable.View ref={(comp) => {
                        this.identityPiecesAnim = comp
                    }}
                                     style={{
                                         width: responsiveWidth(90),
                                         height: 60,
                                         marginTop: 20,
                                         alignSelf: 'center',
                                         borderRadius: 10,
                                         paddingLeft: 20,
                                         paddingRight: 20,
                                         backgroundColor: 'white'
                                     }}>
                        <Dropdown
                            label={I18n.t('PIECE_IDENTITE')}
                            data={this.state.identityPieces}
                            useNativeDriver={true}
                            value={this.state.identityPiecesName}
                            onChangeText={(value, index, data) => {
                                this.setState({identityPiecesName: value});
                            }}
                            valueExtractor={(value) => {
                                return I18n.t(value.name)
                            }}
                            labelExtractor={(value) => {
                                return I18n.t(value.name)
                            }}
                        />
                    </Animatable.View>

                    <Animatable.View ref={(comp) => {
                        this.numeroIdentiteAnim = comp
                    }}>
                        <Fumi iconClass={FontAwesomeIcon} iconName={'address-card'}
                              label={`${I18n.t('NUMERO_IDENTITE')}`}
                              iconColor={'#f95a25'}
                              iconSize={20}
                              onChangeText={(numeroIdentite) => {
                                  this.setState({numeroIdentite})
                              }}
                              style={styles.input}
                        >
                        </Fumi>
                    </Animatable.View>
                    <Animatable.View ref={(comp) => {
                        this.identityDateExpiryAnim = comp
                    }}>
                        <Fumi iconClass={FontAwesomeIcon} iconName={'calendar-times-o'}
                              label={I18n.t('IDENTITY_PIECE_EXPIRY_DATE')}
                              iconColor={'#f95a25'}
                              iconSize={20}
                              style={styles.input}
                              onFocus={() => {
                                  Keyboard.dismiss();
                                  this.setState({showPickerDateExpiration: true})
                              }}
                              {...this.dateExpirationFumiProps}>
                        </Fumi>
                    </Animatable.View>


                    <View style={{
                        paddingLeft: 20,
                        paddingRight: 20,
                        marginTop: 10,
                        flexDirection: 'row',
                        justifyContent: "space-between"
                    }}>
                        <Text style={{color: Color.whiteColor}}>{I18n.t('SEXE')}</Text>
                        <View style={styles.contentSwitch}>
                            <SwitchSelector options={this.state.sexe}
                                            initial={0}
                                            buttonColor={Color.accentColor}
                                            backgroundColor={Color.primaryDarkColor}
                                            textColor='white'
                                            bold={true}
                                            hasPadding
                                            height={32}
                                            onPress={(value) => {
                                                this.setState({gender: value})
                                            }}/>
                        </View>
                    </View>

                    <Button style={styles.btnvalide}
                            textStyle={styles.textbtnvalide}
                            isLoading={this.state.isLoging}
                            onPress={() => {
                                this.onSubmitIdentityClient()
                            }}>
                        {I18n.t('SUBMIT_LABEL')}</Button>

                </ScrollView>
            </>
        )
    }
}

const maptStateToProps = state => ({
    loading: state.createIdentificationReducer.loading,
    result: state.createIdentificationReducer.result,
    error: state.createIdentificationReducer.error,
});

const mapDispatchToProps = dispatch => bindActionCreators({
    createIndentificationAction,
    createIndentificationResetAction,
    getUserIdentificationAction
}, dispatch);

export default connect(maptStateToProps, mapDispatchToProps)(CreateIdentificationUser);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Color.primaryDarkColor,
    },
    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,
    },
    btnvalide: {
        marginTop: 20,
        marginLeft: 20,
        marginRight: 20,
        borderColor: 'transparent',
        backgroundColor: Color.accentLightColor,
        height: 52
    },
    input: {
        height: 60,
        marginTop: responsiveHeight(2),
        marginLeft: responsiveWidth(5),
        marginRight: responsiveWidth(5),
        borderRadius: 5,
    },
    contentSwitch: {
        width: responsiveWidth(40),
    },
});