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 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 {MonitoredArea} from "../MonitoredAreaPageTypes";

type MonitoredAreaDialogProps = {
    handleClose: () => void
    handleSubmit: (monitoredArea: MonitoredArea) => void
    dialogOpen: boolean
}


type MonitoredAreaDialogState = {
    newMonitoredArea: MonitoredArea
}


export class NewMonitoredAreaDialog extends React.Component<MonitoredAreaDialogProps, MonitoredAreaDialogState> {
    readonly state: MonitoredAreaDialogState = {
        newMonitoredArea: {
            id: 0,
            description: "",
            pvAreas: [],
            isExpanded: false
        }
    };

    private handleClose = this.props.handleClose;

    private handleDialogChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
        this.setState({
            newMonitoredArea: {
                ...this.state.newMonitoredArea,
                [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">Create a new monitored area</DialogTitle>
            <DialogContent>
                <DialogContentText>
                    To create a monitored area, please fill in required fields.
                </DialogContentText>
                <TextField
                    autoFocus
                    required
                    margin="dense"
                    id="description"
                    label="DESCRIPTION"
                    type="text"
                    fullWidth
                    name={"description"}
                    value={this.state.newMonitoredArea.description}
                    onChange={this.handleDialogChange}
                />
            </DialogContent>
            <DialogActions>
                <Button onClick={this.handleClose} color="primary">
                    Cancel
                </Button>
                <Button onClick={() => this.props.handleSubmit(this.state.newMonitoredArea)} color="primary">
                    Save
                </Button>
            </DialogActions>
        </Dialog>
    }

}


