import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import {DialogContentText} from "@material-ui/core";
import TextField from "@material-ui/core/TextField";
import InputAdornment from "@material-ui/core/InputAdornment";
import DialogActions from "@material-ui/core/DialogActions";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import * as React from "react";
import {Instrument, InstrumentState} from "../SensorsPageTypes";

type InstrumentsDialogProps = {
    handleClose: () => void
    handleSubmit: (instrument: Instrument) => void
    dialogOpen: boolean
}


type InstrumentsDialogState = {
    newInstrument: Instrument

}


export class NewInstrumentDialog extends React.Component<InstrumentsDialogProps, InstrumentsDialogState> {
    readonly state: InstrumentsDialogState = {
        newInstrument: {
            id: 0,
            state: InstrumentState.CREATED,
            guid: "",
            gpsCoordinates: "",
            altitude: 0,
            tilt: 0,
            direction: 0,
            calibrationValue: 1,
            monitoredAreas: [],
            isExpanded: false
        }
    };

    private handleClose = this.props.handleClose;

    private handleDialogChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
        this.setState({
            newInstrument: {
                ...this.state.newInstrument,
                [event.currentTarget.name]: event.currentTarget.value
            }
        });
    };


    render() {
        return <Dialog open={this.props.dialogOpen} onClose={this.handleClose}
                       aria-labelledby="form-dialog-title">
            <DialogTitle id="form-dialog-title">Assign a New Sensor</DialogTitle>
            <DialogContent>
                <DialogContentText>
                    To create a new sensor, please fill in required fields.
                </DialogContentText>
                <TextField
                    autoFocus
                    required
                    margin="dense"
                    id="guid"
                    label="GUID"
                    type="text"
                    fullWidth
                    name={"guid"}
                    value={this.state.newInstrument.guid}
                    onChange={this.handleDialogChange}
                />
                <TextField
                    autoFocus
                    required
                    margin="dense"
                    id="gps"
                    label="GPS coordinates"
                    type="text"
                    fullWidth
                    name={"gpsCoordinates"}
                    value={this.state.newInstrument.gpsCoordinates}
                    onChange={this.handleDialogChange}
                />
                <TextField
                    autoFocus
                    required
                    margin="dense"
                    id="altitude"
                    label="Altitude"
                    type="number"
                    fullWidth
                    InputProps={{
                        startAdornment: <InputAdornment position="start">m a.s.l</InputAdornment>,
                    }}
                    name={"altitude"}
                    value={this.state.newInstrument.altitude}
                    onChange={this.handleDialogChange}
                />
                <TextField
                    autoFocus
                    required
                    margin="dense"
                    id="tilt"
                    label="Tilt"
                    type="number"
                    fullWidth
                    inputProps={{step: "0.1"}}
                    InputProps={{
                        startAdornment: <InputAdornment position="start">°</InputAdornment>,
                    }}
                    name={"tilt"}
                    value={this.state.newInstrument.tilt}
                    onChange={this.handleDialogChange}
                />
                <TextField
                    autoFocus
                    required
                    margin="dense"
                    id="direction"
                    label="Direction"
                    type="number"
                    fullWidth
                    inputProps={{step: "0.1"}}
                    InputProps={{
                        startAdornment: <InputAdornment position="start">°</InputAdornment>,
                    }}
                    name={"direction"}
                    value={this.state.newInstrument.direction}
                    onChange={this.handleDialogChange}
                />
            </DialogContent>
            <DialogActions>
                <Button onClick={this.handleClose} color="primary">
                    Cancel
                </Button>
                <Button onClick={() => this.props.handleSubmit(this.state.newInstrument)} color="primary">
                    Save
                </Button>
            </DialogActions>
        </Dialog>
    }

}


