/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */
import React, { Component } from 'react';
import LoginView from './loginView';
import { NavigationStackScreenProps } from 'react-navigation-stack';
import { connect } from 'react-redux';
import { getPhoneNumber, genrateVerificationCode } from '../../../redux/actions/Authentication';
import { bindActionCreators } from 'redux';
import { AppReduxState } from '../../../redux/reducers';




interface Iprops extends NavigationStackScreenProps {
    actions: any
}

interface Istates {
    phoneNumber: string,
    selectedCountry: string
}


class LoginContainer extends Component<Iprops, Istates> {

    state = {
        phoneNumber: '',
        selectedCountry: ''
    };

    onPhoneNumberChange = (phoneNumber:string) => this.setState({ phoneNumber })

    onCountrySelect = (selectedCountry:string) => this.setState({ selectedCountry })

    cancelSelect = () => {
        this.setState({ selectedCountry: ''})
    }

    skipLogin = () => {
        const { navigation } = this.props;
        navigation.navigate('App');
    }

    gotoVerfiy = () => {
        const { actions, navigation } = this.props;
        const { phoneNumber } = this.state;
        actions.getPhoneNumber(phoneNumber);
        actions.genrateVerificationCode();
        navigation.navigate('Verify');
    }

    render() {
        const {
            selectedCountry,
            phoneNumber
        } = this.state;
        const disableButton = !selectedCountry || phoneNumber.length < 10;
        return (
            <LoginView
             skipLogin={this.skipLogin}
             gotoVerfiy={this.gotoVerfiy}
             onPhoneNumberChange={this.onPhoneNumberChange}
             onCountrySelect={this.onCountrySelect}
             selectedCountry={selectedCountry}
             phoneNumber={phoneNumber}
             disableButton={disableButton}
            />
        );
    }
}

const mapStateToProps = (state:AppReduxState) => {
    return{
    };
  }

const matchDispatchToProps = (dispatch:any) => ({
    actions: bindActionCreators({ getPhoneNumber, genrateVerificationCode },dispatch)
})

export default connect(mapStateToProps,matchDispatchToProps)(LoginContainer);
