import * as React from 'react';
import {InjectedFormProps, reduxForm} from 'redux-form';
import {Text} from '../../_universal/Text/Text.style';
import AuthenticationScreenWrapper
    from '../../../screens/AuthenticationScreens/_Components/AuthenticationScreenWrapper';
import copy from '../../../shared/copy/index';
import {SignUpHeader} from '../../../screens/AuthenticationScreens/SignUp/SignUp.styles';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
import {SignUp} from '../../../models/SignUp';
import {Logger} from '../../../utils/Logger';
import {Alert} from 'react-native';
import {NavigationActions, StackActions} from 'react-navigation';
import {Location as LocationUtils} from '../../../shared/functions/Localization';
import STYLE = Logger.STYLE;

export namespace Localization {
    export interface Props {
        formValues?: formValues;
        navigate?: (routeName: any) => void;
        updateForm?: (
            form: string,
            field: string,
            value: any,
            touch?: boolean,
            persistentSubmitErrors?: boolean,
        ) => void;
        dispatchSignUp?:(data:SignUp) => Promise<boolean>;
    }

    export type formValues = {
        [fieldName: string]: any;
    }
}

class Localization extends React.Component<Localization.Props & InjectedFormProps<Localization.formValues>> {

    state = {
        ...copy.localization.permissionApproved,
        permission: true,
    };

    private _resetNavigation = () => {
        const {navigate} = this.props;
        const resetAction = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({routeName: 'Other'})],
        });
        navigate && navigate('Other');
    };

    private _getLocationAsync = async () => {
        const {updateForm, navigate, dispatchSignUp, formValues} = this.props;

        let {status} = await Permissions.askAsync(Permissions.LOCATION);
        if (status !== 'granted') {
            this.setState({
                errorMessage: 'Permission to access location was denied',
            });
            Logger.log('LOCALIZATION', status, undefined);
            this._setContent();

            return;
        }

        Logger.log('LOCALIZATION', status, undefined);

        await Location.getCurrentPositionAsync()
            .then((res: Location.LocationData) => {
                return LocationUtils.parseAddressAsync(res)
                    .then((readableLocation) => {
                        updateForm && updateForm('sign_up_form', 'location', {
                            coords: [res.coords.latitude, res.coords.longitude],
                            readableLocation: readableLocation
                        });

                        return {
                            coords: [res.coords.latitude, res.coords.longitude],
                            readableLocation: readableLocation
                        };
                    });
            })
            .then(async (locationData: any) => {
                if (formValues) {
                    console.log('locationData', locationData)
                    const signUpObj: SignUp = {
                        email: formValues['email'].toLowerCase(),
                        username: formValues['username'],
                        password: formValues['password'],
                        birthday: new Date(formValues['birthday']),
                        verificationCode: formValues['verificationCode'],
                        location: locationData,
                    };

                    dispatchSignUp && await dispatchSignUp(signUpObj)
                        .then(() => {
                            this._resetNavigation();
                        })
                        .catch((err:any)=>{
                            Alert.alert('Error', err)
                        });

                    return signUpObj;
                }
            })
            .catch(err => Logger.log('GET_CURRENT_POSITION_ERROR', err, STYLE.ERROR));

    };

    private _setContent = () => {
        this.setState({...copy.localization.permissionDenied, permission: false});
    };

    public render() {
        const {formValues, handleSubmit, submitting, valid, invalid} = this.props;
        const {header, content, button, permission} = this.state;

        return (
            <AuthenticationScreenWrapper
                handleSubmit={() => this._getLocationAsync}
                invalid={false}
                valid={true}
                submitting={false}
                header={
                    permission ?
                        <SignUpHeader>
                            {formValues && formValues['username'] + header}
                        </SignUpHeader> :
                        <SignUpHeader>
                            {header}
                        </SignUpHeader>
                }
                buttonTitle={button}
                buttonWidth={'100%'}
            >
                <Text style={{textAlign: 'center'}}>{content}</Text>
            </AuthenticationScreenWrapper>
        );
    }
}

export const LocalizationForm = reduxForm<Localization.Props, Localization.formValues>({
    form: 'sign_up_form',
    destroyOnUnmount: false,
})(Localization);