import clsx from 'clsx';

import Grid from "@material-ui/core/Grid";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardContent from "@material-ui/core/CardContent";
import {createStyles, Theme, withStyles, WithStyles, WithTheme} from "@material-ui/core";
import CardActions from "@material-ui/core/CardActions";
import IconButton from "@material-ui/core/IconButton";
import Collapse from "@material-ui/core/Collapse";
import Divider from "@material-ui/core/Divider";
import * as React from "react";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import DoneIcon from "@material-ui/icons/Done";
import EditIcon from "@material-ui/icons/Edit";
import MonitoredAreasCardSeciton from "../../common/MonitoredAreasCardSeciton";
import {Inverter} from "../InverterConnectionPageTypes";
import {InsIvnMonitoredArea} from "../../sensors/SensorsPageTypes";
import {SiteDescription} from "../../../../common/appRoutes";


const styles = (theme: Theme) =>
    createStyles({
        paper: {
            padding: theme.spacing(2),
            textAlign: 'center',
            color: theme.palette.text.secondary,
        },
        tableCell: {
            borderBottom: "none"
        },
        expand: {
            transform: "rotate(0deg)",
            marginLeft: "auto",
            transition: theme.transitions.create("transform", {
                duration: theme.transitions.duration.shortest
            })
        },
        expandOpen: {
            transform: "rotate(180deg)"
        },
    });

type Props = {
    cardIndex: number,
    inverter: Inverter,
    availableMonitoredAreas: InsIvnMonitoredArea[]
    handleUpdate: (updatedInverter: Inverter) => void
    onSectionChange: (route: SiteDescription) => void
} & WithStyles<typeof styles> & WithTheme


type State = {
    isExpanded: boolean,
    isEdited: boolean,
    toggleState: boolean,
    inverter: Inverter
}


class InverterCard extends React.Component<Props, State> {
    readonly state: State = {
        isExpanded: false,
        isEdited: false,
        toggleState: false,
        inverter: this.props.inverter
    };


    private editInstrumentProperties = () => {
        if (this.state.isEdited) {
            this.props.handleUpdate(this.state.inverter)
        }

        this.setState({
            ...this.state,
            isEdited: !this.state.isEdited
        })
    };

    private handleExpandClick = () => {
        this.setState({
            ...this.state,
            isExpanded: !this.state.isExpanded
        })
    };

    render() {
        return <Grid item sm={6} xs={12}>
            <Card>
                <CardHeader title={`Inverter #${this.props.inverter.id}`}/>
                <CardContent>
                </CardContent>
                <CardActions disableSpacing>
                    <IconButton
                        className={clsx(this.props.classes.expand, {
                            [this.props.classes.expandOpen]: this.state.isExpanded
                        })}
                        onClick={this.handleExpandClick}
                        aria-expanded={this.state.isExpanded}
                        aria-label="show more"
                    >
                        <ExpandMoreIcon/>
                    </IconButton>
                </CardActions>
                <Collapse in={this.state.isExpanded} timeout="auto" unmountOnExit>
                    <Divider variant="middle"/>
                    <MonitoredAreasCardSeciton isEdited={this.state.isEdited}
                                               monitoredAreas={this.props.inverter.monitoredAreas}
                                               availableMonitoredAreas={this.props.availableMonitoredAreas}
                    />
                    <CardActions disableSpacing>
                        <IconButton aria-label="add to favorites"
                                    onClick={this.editInstrumentProperties}>
                            {this.state.isEdited ? <DoneIcon/> : <EditIcon/>}
                        </IconButton>
                    </CardActions>
                </Collapse>
            </Card>
        </Grid>
    }
}


export default withStyles(styles, {withTheme: true})(InverterCard)