import React, {Component, useState} from 'react';

import {Server, Port} from "../../components/Common/ConnectionDB";

import {Modal, Form, Button, Container, Col, Tab, Tabs, Image, DropdownButton,
Dropdown} from 'react-bootstrap';
import {connect} from "react-redux";
import {authLogin, fixtureLocation} from "../../Actions";
import axios from "axios";
import notifyMessage from "./DefaultNotification";
import FormControl from 'react-bootstrap/FormControl'
import {Link} from "react-router-dom";
import {Route, withRouter} from 'react-router-dom';

// var current_date = new Date();

class InOutModal extends Component {

constructor(props) {
super(props);
this.formcontrol = React.createRef();
this.state = {
modalIsOpen: false,
disable_btn: true,
//Main state
fixtureno: this.props.fix_no,
storage: this.props.getstorage,
productionline: this.props.getproduction,
storagemode: this.props.mode,
data: [],
row: []
}
this.toggleModal = this.toggleModal.bind(this)
this.handleKeyPress = this.handleKeyPress.bind(this)
}

saveMVhitory = () => {

let current_date = new Date();

let detail = '';
let h_type = 0;
let h_local = '';
if (this.props.mode === 1) {
h_type = 5;
h_local = this.state.storage
detail = 'In fixture ' + '"' + this.state.fixtureno + '" to storage "'
+ h_local + '" by "' + sessionStorage.getItem('fullname') + '"'
} else {
h_type = 6;
h_local = this.state.productionline
detail = 'Out fixture ' + '"' + this.state.fixtureno + '" to production
line "' + h_local + '" by "' + sessionStorage.getItem('fullname') + '"'
}

// axios.post('http://localhost:8000/hisfix/', {
axios.post("http://" + Server + ":" + Port + "/" +
sessionStorage.getItem("plant") + "/hisfix/", {
hisdetail: detail,
hisdate: current_date,
histype: h_type,
hisstatus: 0,
 hisfixtureid: this.state.fixtureno,
hisaccountid: sessionStorage.getItem('user'),
hisaccountgroup: "",
hisdataaccount: "",
// hispmduedate: this.props,
hislocation: h_local

})
.then(res => res.data)
.then(data => {
// this.toggleModal();
}).catch(err => {
console.log(err.response.data)
notifyMessage(err.response.data, '2')
})
};

editLocationData(data, location) {
this.props.fixtureLocation(data, location)
this.setState({
modalIsOpen: !this.state.modalIsOpen
});
}

editLocationData2(data, location) {
this.props.fixtureLocation(data, location)
}

toggleModal() {
this.setState({
modalIsOpen: !this.state.modalIsOpen
});
}

handle_change = e => {
const name = e.target.name;
const value = e.target.value;
this.setState(prevstate => {
const newState = {...prevstate};
newState[name] = value;
return newState;
});
}

handleKeyPress(event) {

if (event.key === "Enter") {

let fix_no = this.state.fixtureno
this.setState({
storage: "",
productionline: ""
})

axios
// .get("http://localhost:8000/fixture/get_fixture/?fixtureno=" +
fix_no)

.get("http://" + Server + ":" + Port + "/" +

sessionStorage.getItem("plant") + "/fixture/get_fixture/", {
params: {
fixtureno: fix_no,
// plant: sessionStorage.getItem("plant")
}
})
.then(res => {
console.log(res.data)
this.setState({
storage: res.data[0].storage,
productionline: res.data[0].productionline,
disable_btn: false,
data: res.data[0]
}
);
}
).catch(err => {
this.setState({
disable_btn: true
})
notifyMessage("No Fixture Number ", 2)
})
}
}

formcontrolFocus() {
this.formcontrol.current.focus()
}

componentDidMount() {
console.log(this.props.currentmode)
this.toggleModal(); //enable/disable Modal.

if (this.props.mode === 1) { //btn_storage

this.setState({
storagemode: 1
})
} else {
this.setState({ //btn_production
storagemode: 2
})
}
}

render() {
return (
<div>
<Modal onShow={() => {
this.formcontrolFocus()
}}
show={this.state.modalIsOpen}
size="sm"
centered={true}
>
<Modal.Header>
<Modal.Title>{this.props.topic}</Modal.Title>
</Modal.Header>
 <Form onSubmit={(event) => {
if (sessionStorage.getItem('plant') === 'dcbu') {
if ((this.props.currentmode !== 2 &&
this.props.modeBarcode === false) || (this.state.data.storagemode !== 2 &&
this.props.modeBarcode === true)) {
this.editLocationData(this.state,
this.props.StmName)
this.saveMVhitory()
this.props.onToggleFlag()
} else if ((this.props.currentmode === 2 &&
this.props.modeBarcode === false)) {

event.preventDefault()
this.props.history.push({
pathname: sessionStorage.getItem("plant") +
'/pmissue',
fixno: this.props.row.fixtureno,
pmddate: this.props.row.pmddate,
pmlistid: this.props.row.pmlistid,
pmperiodmonth: this.props.row.pmperiodmonth,
pmperiodday: this.props.row.pmperiodday,
numberday: this.props.row.numberday,
currentmode: this.props.currentmode,
state_element: this.state,
stmname: this.props.StmName,
mode: this.props.mode
})
} else if ((this.state.data.storagemode === 2 &&
this.props.modeBarcode === true)) {
event.preventDefault()
this.props.history.push({
pathname: sessionStorage.getItem("plant") +
'/pmissue',
fixno: this.state.data.fixtureno,
pmddate: this.state.data.pmddate,
pmlistid: this.state.data.pmlistid,
pmperiodmonth: this.state.data.pmperiodmonth,
pmperiodday: this.state.data.pmperiodday,
numberday: this.state.data.numberday,
currentmode: this.state.data.storagemode,
state_element: this.state,
stmname: this.props.StmName,
mode: this.props.mode
})
}
} else {
this.editLocationData(this.state, this.props.StmName)
this.saveMVhitory()
this.props.onToggleFlag()
}
}}>
<Modal.Body>

<Form.Group controlId="formDateAddby">
<h7>Addby: {sessionStorage.getItem('user')}</h7>
</Form.Group>

<Form.Group controlId="formFixtureNo">
<Form.Label>Fixture Number: </Form.Label>
 <Form.Control type="text"
name="fixtureno"
ref={this.formcontrol}
value={this.state.fixtureno}
onChange={this.handle_change}
onKeyPress={this.handleKeyPress}
required

/>
{this.props.modeBarcode && <p style={{color:
'red'}}>Please scan barcode !!</p>}

</Form.Group>

{this.props.mode === 1 && <Form.Group

controlId="formStorage">
<Form.Label>{this.props.StmName}</Form.Label>
<Form.Control type="text"
name="storage"
value={this.state.storage}
onChange={this.handle_change}
required
/>
</Form.Group>}

{this.props.mode === 2 && <Form.Group

controlId="formProduction">
<Form.Label>{this.props.StmName}</Form.Label>
<Form.Control type="text"
name="productionline"
value={this.state.productionline}
onChange={this.handle_change}
required
/>
</Form.Group>}

</Modal.Body>
<Modal.Footer>
<Button type='submit' variant=' d-none'>OK</Button>

{!this.props.modeBarcode && this.props.currentmode ===

2 &&
<Button variant="primary" type="submit">
OK
</Button>
// <Button id="eieiei" variant="info" type='submit'
size='sm' onClick={() => {
// this.setState({row: this.props.row}, () => {
// console.log(this.state.row)
// })
// }}>
// <Link className="text-light"
// to={{
// pathname:
sessionStorage.getItem("plant") + '/pmissue',
// fixno: this.props.row.fixtureno,
// pmddate: this.props.row.pmddate,
// pmlistid: this.props.row.pmlistid,
// pmperiodmonth:
this.props.row.pmperiodmonth,
// pmperiodday:
this.props.row.pmperiodday,
// numberday:
this.props.row.numberday,
// currentmode:
this.props.currentmode,
// state_element: this.state,
// stmname: this.props.StmName,
// mode: this.props.mode
//
// }}>OK</Link></Button>
}

{!this.props.modeBarcode && this.props.currentmode !==

2 &&
<Button variant="primary" type="submit">
OK
</Button>}

{this.props.modeBarcode &&
this.state.data.storagemode !== 2 &&
<Button variant="primary" type="submit"
disabled={this.state.disable_btn}>
OK
</Button>}

{this.props.modeBarcode && this.state.data.storagemode

=== 2 &&
<Button variant="primary" type="submit"
disabled={this.state.disable_btn}>
OK
</Button>
// <Button variant="info" size='sm'><Link
className="text-light"
// to={{
//
pathname: sessionStorage.getItem("plant") + '/pmissue',
//
fixno: this.state.data.fixtureno,
//
pmddate: this.state.data.pmddate,
//
pmlistid: this.state.data.pmlistid,
//
pmperiodmonth: this.state.data.pmperiodmonth,
//
pmperiodday: this.state.data.pmperiodday,
//
numberday: this.state.data.numberday,
//
currentmode: this.state.data.storagemode,
//
state_element: this.state,
//
stmname: this.props.StmName,
// mode:
this.props.mode
// }}>OK</Li
nk></Button>
}

<Button variant="secondary"
onClick={this.props.onToggleFlag}>Cancel</Button>

</Modal.Footer>
</Form>
</Modal>

</div>
)
;
}
}

function mapStateToProps(state) {
// console.log(state)
return {
fixtures: state.fixtures,
form: state.form,
}
}

export default withRouter(connect(mapStateToProps, {fixtureLocation})(InOutModal));