import React from "react";
import CardHeader from "@material-ui/core/CardHeader";
import CardContent from "@material-ui/core/CardContent";
import IconButton from "@material-ui/core/IconButton";
import AddIcon from "@material-ui/icons/Add";
import Menu from "@material-ui/core/Menu";
import List from "@material-ui/core/List";
import MenuItem from "@material-ui/core/MenuItem";
import {InsIvnMonitoredArea} from "../sensors/SensorsPageTypes";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import DeleteIcon from "@material-ui/icons/Delete";

type Props = {
    isEdited: boolean,
    availableMonitoredAreas: InsIvnMonitoredArea[]
    monitoredAreas: InsIvnMonitoredArea[]
}
type State = {
    menuAnchorElement: null | HTMLElement
    monitoredAreas: InsIvnMonitoredArea[]
}


class MonitoredAreasCardSeciton extends React.Component<Props, State> {
    readonly state: State = {
        menuAnchorElement: null,
        monitoredAreas: this.props.monitoredAreas
    };

    private handleAddMonitoredAreaClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        this.setState({
            ...this.state,
            menuAnchorElement: event.currentTarget,
        })
    };

    private handleAddMonitoredArea = (event: React.MouseEvent<HTMLLIElement>) => {
        this.setState({
            ...this.state,
            monitoredAreas: this.addMonitoredArea(event)
        });

        this.handleAddMonitoredAreaClose();
    };

    private handleAddMonitoredAreaClose = () => {
        this.setState({
            ...this.state,
            menuAnchorElement: null,
        })
    };

    private addMonitoredArea = (event: React.MouseEvent<HTMLLIElement>) => {
        const result = this.props.availableMonitoredAreas.find((value) => {
            return value.id === event.currentTarget.value
        });
        if (result) {
            this.state.monitoredAreas.push(result);
        }
        return this.state.monitoredAreas;
    };

    private handleDeleteMonitoredArea = (index: number) => {
        this.setState({
            ...this.state,
            monitoredAreas: this.deleteMonitoredArea(index)
        });
    };


    private deleteMonitoredArea = (index: number) => {
        this.state.monitoredAreas.splice(index, 1);
        return this.state.monitoredAreas
    };


    private renderAddMonitoredAreaMenuActions = () => {
        return this.props.availableMonitoredAreas.length !== 0 ? this.props.availableMonitoredAreas.map((value) =>
            <MenuItem key={value.id}
                      value={value.id}
                      onClick={this.handleAddMonitoredArea}>{`Monitored Area #${value.id}`}</MenuItem>
        ) : <MenuItem onClick={this.handleAddMonitoredAreaClose}>{"No monitored areas available"}</MenuItem>
    };

    private renderMonitoredAreas = (monitoredAreas: InsIvnMonitoredArea[]) => {
        return monitoredAreas.map((ma, index) => {
            if (monitoredAreas && monitoredAreas.length !== 0) {
                return (<ListItem key={index}>
                    <ListItemText
                        primary={`Monitored Area #${ma.id}`}
                        secondary={ma.description}
                    />
                    <ListItemSecondaryAction>
                        <IconButton disabled={!this.props.isEdited}
                                    onClick={() => this.handleDeleteMonitoredArea(index)} edge="end"
                                    aria-label="delete">
                            <DeleteIcon/>
                        </IconButton>
                    </ListItemSecondaryAction>
                </ListItem>)
            }
        });
    };

    render() {
        return <>
            <CardHeader subheader="Monitored areas"/>
            <CardContent>
                {
                    this.props.isEdited ?
                        <div>
                            <IconButton
                                aria-controls="simple-menu"
                                aria-haspopup="true"
                                onClick={this.handleAddMonitoredAreaClick}
                            ><AddIcon/>
                            </IconButton>
                            <Menu
                                id="simple-menu"
                                anchorEl={this.state.menuAnchorElement}
                                keepMounted
                                open={Boolean(this.state.menuAnchorElement)}
                                onClose={this.handleAddMonitoredAreaClose}
                            >{this.renderAddMonitoredAreaMenuActions()}
                            </Menu>
                        </div>
                        : undefined
                }
                <List>
                    {this.renderMonitoredAreas(this.props.monitoredAreas)}
                </List>
            </CardContent>
        </>;

    }
}

export default MonitoredAreasCardSeciton
