import React from 'react';
import {
    Dialog,
    DialogTitle,
    Typography,
    List,
    ListItem,
    ListItemIcon,
    ListItemSecondaryAction,
    ListItemText,
    Switch
} from '@material-ui/core';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../reducers';

import HotTubIcon from '@material-ui/icons/HotTub';
import SpeedIcon from '@material-ui/icons/Speed';
import MemoryIcon from '@material-ui/icons/Memory';
import HourglassEmptyIcon from '@material-ui/icons/HourglassEmpty';

import { MonitoringMetric } from '../models';
import { setMonitoringMetric } from '../actions';

interface MonitoringDialogProps {
    onClose: () => void,
    open: boolean
}

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            width: '100%',
            minWidth: '500px',
            backgroundColor: theme.palette.background.paper,
        },
    }),
);

export const metricLookup: { [key: string]: { icon: any, label: string } } = {
    'CpuFreq': {
        icon: <SpeedIcon />,
        label: "Core frequency (in MHz)"
    },
    'CpuTemp': {
        icon: <HotTubIcon />,
        label: "Core temperature (in °C)"
    },
    'RamUsage': {
        icon: <MemoryIcon />,
        label: "Memory usage (in MB)"
    },
    'SysLoad': {
        icon: <HourglassEmptyIcon />,
        label: "System load average (last minute)"
    }
};

const MonitoringDialog: React.FC<MonitoringDialogProps> = ({ onClose, open }) => {
    const dispatch = useDispatch();
    const activeMetrics = useSelector((state: RootState) => state.monitoring.activeMetrics);
    const classes = useStyles();

    const metricList = Object.keys(activeMetrics).map((key, index) => {
        return (
            <ListItem key={index}>
                <ListItemIcon>
                    {metricLookup[key].icon}
                </ListItemIcon>
                <ListItemText id="switch-list-label-wifi" primary={metricLookup[key].label} />
                <ListItemSecondaryAction>
                    <Switch
                        edge="end"
                        onChange={(_event, checked) => dispatch(setMonitoringMetric(key, checked))}
                        checked={activeMetrics[key as MonitoringMetric].active}
                        inputProps={{ 'aria-labelledby': 'switch-list-label-wifi' }}
                    />
                </ListItemSecondaryAction>
            </ListItem>
        );
    });

    return (
        <Dialog aria-labelledby="simple-dialog-title" open={open} onClose={onClose}>
            <DialogTitle id="simple-dialog-title">
                <Typography variant="h5">
                    Select monitoring metrics
	      </Typography>
            </DialogTitle>
            <List className={classes.root}>
                {metricList}
            </List>
        </Dialog>
    );

}

export default MonitoringDialog;