BossPanel

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { saveRestaurantWithAddress } from '../api/apiCalls'
import { Link } from "react-router-dom";


class BossPanel extends Component {

    state = {
        restaurantName: null,
        restaurantPhone: null,
        restaurantTablePiece: 0,

        addressCountry: null,
        addressCity: null,
        addressTown: null,
        addressDetailed: null,

        errors: {},
        pendingApicall: false

    }
    componentDidMount() {

        const { history, isLoggedIn, dispatch, userRoleFk } = this.props
        const { push } = history

        //kontrolleri burada yap
        if (!isLoggedIn) {//login olmamışsa login ol
            push('/login')
        } else {//login olmuşsa
            if (userRoleFk !== 1) {//userRoleFk 1 değilse anasayfaya yönlendir
                push('/')
            }
        }

    }

    onChange = event => {
        const { name, value } = event.target
        const errors = { ...this.state.errors }

        errors[name] = undefined

        this.setState({
            [name]: value,
            errors
        })

    }

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

        const {
            restaurantName,
            restaurantPhone,
            addressCountry,
            addressCity,
            addressTown,
            addressDetailed
        } = this.state

        const restaurantWithAddress = {
            restaurantName,
            restaurantPhone,
            restaurantTablePiece:5,
            addressCountry,
            addressCity,
            addressTown,
            addressDetailed
        }


        this.setState({ pendingApicall: true })

        try {
            console.log("restaurant:", restaurantWithAddress)
            const response = await saveRestaurantWithAddress(restaurantWithAddress)



        } catch (error) {
            if (error.response.data.validationErrors) {
                this.setState({ errors: error.response.data.validationErrors });
                console.log(error);
            }
        }

        this.setState({ pendingApicall: false });


    }






    render() {
        const { errors } = this.state;
        const {
            restaurantName,
            restaurantPhone,
            restaurantTablePiece,
            addressCountry,
            addressCity,
            addressTown,
            addressDetailed
        } = errors;
        return (
            <div container style={styles.containerStyle}>
                <div className="row">

                    <div className="col-sm-2">
                        <div class="list-group">
                            <a class="list-group-item list-group-item-action active" aria-current="true">
                                Dashboard
                            </a>
                            <a href="#" class="list-group-item list-group-item-action">Add Restaurant</a>
                            <a href="#" class="list-group-item list-group-item-action">Get QR Code</a>
                            <a href="#" class="list-group-item list-group-item-action">Statistics</a>
                        </div>
                    </div>


                    <div className="col-sm-8" style={styles.restaurantForm}>
                        <form>
                            <div class="mb-3">
                                <label for="restaurantName" class="form-label">Restaurant Name</label>
                                <input name="restaurantName" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" onChange={this.onChange} />
                            </div>
                            <div class="mb-3">
                                <label for="addressCountry" class="form-label">Country</label>
                                <input name="addressCountry" type="text" class="form-control" id="exampleInputPassword1" onChange={this.onChange} />
                            </div>
                            <div class="mb-3">
                                <label for="addressCity" class="form-label">City</label>
                                <input name="addressCity" type="text" class="form-control" id="exampleInputPassword1" onChange={this.onChange} />
                            </div>
                            <div class="mb-3">
                                <label for="addressTown" class="form-label">Town</label>
                                <input name="addressTown" type="text" class="form-control" id="exampleInputPassword1" onChange={this.onChange} />
                            </div>
                            <div class="mb-3">
                                <label for="addressDetailed" class="form-label">Detailed Address</label>
                                <input name="addressDetailed" type="text" class="form-control" id="exampleInputPassword1" onChange={this.onChange} />
                            </div>
                            <div class="mb-3">
                                <label for="restaurantPhone" class="form-label">Restaurant Phone</label>
                                <input name="restaurantPhone" type="text" class="form-control" id="exampleInputPassword1" onChange={this.onChange} />
                            </div>
                            <div class="mb-3">
                                <label for="restaurantTablePiece" class="form-label">Table Piece:</label>
                                <input name="restaurantTablePiece" type="number" min="1" max="500" step="1" onChange={this.onChange} style={{ marginLeft: 5 }} />
                            </div>
                            <button type="button" class="btn btn-primary" onClick={this.onClickAdd}>Add</button>
                        </form>

                    </div>

                </div>






            </div>


        );
    }
}

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


const styles = {
    containerStyle: {
        margin: 10
    },
    restaurantForm: {
        marginTop: 20
    }
}

export default connect(mapStateToProps)(BossPanel);