import React, { Component } from 'react';
import Input from '../components/input';
//import { Authentication } from '../shared/AuthenticationContext'
import { connect } from 'react-redux'
import { loginHandler } from '../redux/authActions'

class LoginPage extends Component {

    //static contextType = Authentication;

    state = {
        userEmail: null,
        userPassword: null,
        errors: null,
        pendingApicall: false,
    }


    //inputlardaki verileri anlık olarak variable'lara atar
    onChange = event => {
        const { name, value } = event.target
        this.setState({
            [name]: value,
            error: undefined//inputta yaptığımız her değişiklikte alerti kaldırmak için error'u undefined yap
        })
    }


    onClickLogin = async event => {
        event.preventDefault()

        const { userEmail, userPassword } = this.state

        const creds = {//userEmail'i creds içinde username olarak gönderiyoruz
            username: userEmail,
            password: userPassword
        }

        const { history, dispatch } = this.props//propstan gelen dispatch'i alıyoruz    
        const { push } = history//yönlendirme yapabilmek için push objesini props'tan destructuring ile aldık

        this.setState({//login'e her basıldığında mevcut error'ları kaldır
            error: null
        });


        this.setState({ pendingApicall: true });

        try {
            await dispatch(loginHandler(creds));
            //rolü çek ona göre sayfalara yönlendir
            console.log("logine gelen props:", this.props)


        } catch (apiError) {
            this.setState({
                error: apiError.response.data.message
            })
        }

        this.setState({ pendingApicall: false });
    }



    render() {
        const { userEmail, userPassword, error, pendingApiCall } = this.state//aşağıdaki satırda this.state.username yazacağımıza direkt state'deki veriyi object destructuring yapıyoruz
        const buttonEnabled = userEmail && userPassword//inputlara veri girildiyse butonu enable yapmak için

        return (
            <div className="container">
                <form>
                    <h1 className="text-center">{'Employee Panel - Login'}</h1>

                    <Input name="userEmail" label={'User Email'} error={''} onChange={this.onChange} />
                    <Input name="userPassword" label={'User Password'} error={''} onChange={this.onChange} />


                    {this.state.error && <div className="alert alert-danger">{this.state.error}</div>}


                    <div className="text-center">
                        <button class="btn btn-primary"
                            type="submit"
                            disabled={pendingApiCall || !buttonEnabled}
                            onClick={this.onClickLogin}>Login
                        </button>
                    </div>
                </form>

            </div>
        );
    }
}

const mapStateToProps = store => {//store'daki isLoggedIn field'ını kullanabilmek için mapStateToProps yapıyoruz
    console.log("LoginPage mapStateToProps store:", store)
    return {
        isLoggedIn: store.isLoggedIn,
        userRoleFk: store.userRoleFk
    }
}

export default connect(mapStateToProps)(LoginPage);//mapStateToProps yazmayacağımız için o parametreyi null verdik