import React from "react";
import Dialog from '@material-ui/core/Dialog';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Typography from '@material-ui/core/Typography';

import useStyles from "../useStyles";

const VehiclePopUp = (props) => {
    const classes = useStyles();
    const { vin, online, battery, doors, location, windows, onClose } = props;

    return (
        <Dialog
            fullWidth
            classes={{ paper: classes.popUp }}
            open={true}
            onClose={onClose}
        >
            <DialogTitle align="center" onClose={onClose}>{vin}</DialogTitle>
            <div align="center" className={classes.popUpContent}>
                <p><b>Connected</b>: {online.toString()}</p>
                {online && (
                    <div>
                        {battery != null && (
                            <p><b>battery</b>: {battery.percent}%</p>
                        )}
                        {doors != null && (
                            <div>
                                <h3>Doors</h3>
                                {Object.entries(doors).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
                            </div>
                        )}
                        {windows != null && (
                            <div>
                                <h3>Windows</h3>
                                {Object.entries(windows).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
                            </div>
                        )}
                        {location != null && (
                            <div>
                                <h3>Location</h3>
                                {Object.entries(location).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1]}</p>))}
                            </div>
                        )}
                    </div>
                )}
                {(!online || (battery == null && doors == null && location == null && windows == null)) && (
                    <p>No vehicle data to display.</p>
                )}
            </div>
        </Dialog >
    );
};

const DialogTitle = (props) => {
    const { children, onClose, ...other } = props;
    const classes = useStyles();
    return (
        <MuiDialogTitle disableTypography className={classes.ppopUpTItle} {...other}>
            <Typography variant="h6">{children}</Typography>
            {onClose ? (
                <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
                    <CloseIcon />
                </IconButton>
            ) : null}
        </MuiDialogTitle>
    );
};

export { VehiclePopUp };