import React, { Component } from 'react'
import Dialog from 'react-bootstrap-dialog'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import Loader from 'react-loader-advanced'
import * as Constants from '../../../../common/constants'
import { clusterTableReady } from '../../redux/clusters'
import { buildNumberUpdate, } from '../../../../redux/user'
import apiService from '../../services/apiservices'



import * as Helpers from '../../../../common/helpers'

import { ClusterCombo } from '../../../../common/DropDowns'

class MoveKitchenClusterModalLayout extends Component {
    constructor() {
        super()
        this.state = {
            reasons: {},
            isUpdating: false,
            clusterId: '',
            kitchen_id:'',

            clusterIdErrorText: false,
            clusterIdErrorData: '',
        }
        this.dialog = null

        this.isComponentStillMount = true

        this.clusterIdComponent = null
        this.clusterIdSection = null
    }

    componentWillMount() {
        this.isComponentStillMount = true
    }

    componentDidMount() {

        this.setState({
            status:this.props.data.status 
        });
    }


mandateValidation = (inputName, type) => {
    let inputComponent = inputName + "Component"
    let inputErrorText = inputName + "ErrorText"
    let inputErrorData = inputName + "ErrorData"
    let inputSection = inputName + "Section"
    let errorMsg = Constants.NON_VALID_MSG_INPUT
    if (Constants.FORM_SELECT === type) {
        errorMsg = Constants.NON_VALID_MSG_SELECT
        console.log("input name :::", inputName)
        console.log("input data :::", this.state[inputName])
    }
    if (this.state[inputName] === null || this.state[inputName] === undefined || this.state[inputName] === "") {
        this[inputComponent].focus()
        this.setState({
            [inputErrorText]: true,
            [inputErrorData]: errorMsg
        })
        this[inputSection].className = this[inputSection].className.replace(" has-error", "")
        this[inputSection].className += " has-error"
        return {
            status: false,
            value: ''
        }
    }
    return {
        status: true
    }
}

    validateBuildNumber = (data) => {
        if (this.props.user && this.props.user.build_number && data && data.app_build_no) {
            if (this.props.user.build_number === data.app_build_no) {
                //do smthng here
            } else {
               this.props.dispatch(buildNumberUpdate(data.app_build_no))
window.location.reload()
            }
        } else {
            this.props.dispatch(buildNumberUpdate(data.app_build_no))
window.location.reload()
        }
    }

    componentWillUnmount() {
        this.isComponentStillMount = false
    }


    handleChanges = () => {
    }

    submitData = () => {
        let data = {}
        data.create_again=0
        
        
    }


     clusterChange= (data) => {
    
        this.clusterIdComponent.value=data.value
    
        this.setState({
            clusterId :data.value,
            clusterIdErrorText: false,
            clusterIdErrorData: ''
        })
            
        this.clusterIdSection.className= this.clusterIdSection.className.replace(" has-error", "")
    }




    

    handleOnSubmit = (e) => {

        e.preventDefault();

        this.props.dispatch(clusterTableReady(false))
        let data = {}
  
    
        let clusterIdObject = this.mandateValidation("clusterId", Constants.FORM_SELECT)
        if (clusterIdObject.status) {
            data.cluster_id = this.clusterIdComponent.value
        } else {

             this.props.dispatch(clusterTableReady(true))
            return
        }



    let apiPayloadData=data;


    apiService.updateKitchen(apiPayloadData,this.props.data.kitchen_id)
            .then(responseData => {
                 
                    if (responseData.status === "SUCCESS") {
                        this.props.dispatch(clusterTableReady(true))
                        window.location.reload()
                    } else {

                        this.props.dispatch(clusterTableReady(true))
                        this.dialog.show({
                            title: "Alert",
                            body: responseData.reason ? responseData.reason : "",
                            actions: [
                                Dialog.OKAction(() => {
                                })
                            ],
                        })
                    }
                
            })
            .catch(err => {
                this.props.dispatch(clusterTableReady(true))
                console.error("Error data: ", err)
               alert("exception"+ err);
            })


}



  
    render() {

        return (
            <div className="qr-code-reader-modal">
                <Dialog ref={el => this.dialog = el} />
                <Loader
                    show={this.state.isUpdating}
                    message={'Updating...Please wait'}
                    foregroundStyle={{ color: "#ffffff", fontSize: "17px", fontWeight: "600" }}>
                    <div className="modal-header">
                        <button type="button" className="close"
                            onClick={(e) => {
                                e.preventDefault()
                                this.props.closeModal(false)
                            }}>
                            <span>&times;</span></button>
                        <h4 className="modal-title">Move kitchen ({this.props.data.kitchen_code}) from cluster {this.props.data.cluster_name} - {this.props.data.cluster_code} - {this.props.data.city_name}</h4>
                    </div>

                    <div className="modal-body">
                            <div className="form-horizontal">

                                            

                                            <div className="col-md-12 col-sm-12 col-xs-12">
                                                            <div className="col-md-11 col-sm-12 col-xs-12">
                                                                <div className="form-group" ref={el =>
                                                                       this.clusterIdSection = el}>
                                                                       <label className="col-sm-3 control-label labels" style={{textAlign: "right", paddingTop: "0px"}}>Select Cluster *</label>
                                                                       
                                                             <div className="col-sm-9" ref={el =>
                                                                      this.clusterIdComponent = el}>
                                                                      <ClusterCombo city_id={this.props.data.city_id} clusterChange={this.clusterChange} selectedValue={this.state.clusterId} />
                                                                      <span className="help-block" style={{ display: this.state.clusterIdErrorText ? 'block' : 'none', marginTop: '0px', marginBottom: '0px' }}>
                                                                      {this.state.clusterIdErrorData}
                                                                      </span>
                                                                    </div>
                                                                    </div>
                                                            </div>                                          
                                                    </div>


                            </div>
                    </div>
                    <div className="modal-footer" style={{marginTop: "13%"}}>
                        <button type="button" className="btn btn-primary pull-left"
                            onClick={(e) => {
                                e.preventDefault()
                                this.props.closeModal(false)
                            }}>Close</button>
                            <button
                                    className="btn btn-info pull-right"
                                    style={{ width: "auto" }}
                                    onClick={(e) => {
                                        e.preventDefault()
                                        this.handleOnSubmit(e);
                                    }} >
                                    Submit
                                </button>
                    </div>

            </Loader>
            </div>
        )
    }


    keyedInputChange = (keyedName) => {
        console.log(keyedName)
        let keyedComponent =keyedName+"Component"
        let keyedErrorText =keyedName+"ErrorText"
        let keyedErrorData =keyedName+"ErrorData"
        let keyedSection =keyedName+"Section"
        let name=this[keyedComponent].value.trim()
        this.setState({[keyedName]:name})
        if(!name){
            this.setState({[keyedName] : null})
            return
        }
        this.setState({ [keyedErrorText]: false, [keyedErrorData]: '' })
        this[keyedSection].className = this[keyedSection].className.replace(" has-error", "")
    }
}

function mapStateToProps(state) {
    return {
        user: state.user,
        clusters: state.clusters,
    }
}

export default connect(mapStateToProps)(withRouter(MoveKitchenClusterModalLayout))