import React, { useState } from 'react';
import {
  makeStyles, Paper, IconButton, Grid, Button,
} from '@material-ui/core';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import { useSelector } from 'react-redux';

import ReplayIcon from '@material-ui/icons/Replay';
import EditIcon from '@material-ui/icons/Edit';
import SendIcon from '@material-ui/icons/Send';
import DeleteIcon from '@material-ui/icons/Delete';
import LinkIcon from '@material-ui/icons/Link';

import {
  formatSpeed, formatDate, formatHours,
} from '../common/formatter';
import { useAttributePreference } from '../common/preferences';
import RemoveDialog from '../RemoveDialog';
import { getPosition } from '../common/selectors';
import { useTranslation } from '../LocalizationProvider';

const useStyles = makeStyles((theme) => ({
  paper: {
    width: '300px',
  },
  ...theme.palette.colors,
  listItemContainer: {
    maxWidth: '300px',
  },
  listItemRoot: {
    paddingTop: '0px',
    paddingBottom: '0px',
  }
}));

const StatusView = ({
  deviceId, onShowDetails, onShowHistory, onEditClick, onCommandsClick,
}) => {
  const classes = useStyles();
  const t = useTranslation();

  const [removeDialogShown, setRemoveDialogShown] = useState(false);
  const device = useSelector((state) => state.devices.items[deviceId]);
  const position = useSelector(getPosition(deviceId));

  const distanceUnit = useAttributePreference('distanceUnit');
  const speedUnit = useAttributePreference('speedUnit');

  const handleClick = (e) => {
    e.preventDefault();
    onShowDetails(position.id);
  };

  const handleEditClick = (e) => {
    e.preventDefault();
    onEditClick(deviceId);
  };

  const handleCommandsClick = (e) => {
    e.preventDefault();
    onCommandsClick(deviceId);
  }

  const handleRemove = () => {
    setRemoveDialogShown(true);
  };

  const handleRemoveResult = () => {
    setRemoveDialogShown(false);
  };

  const handleGotoLink = () => {
    const url = `https://maps.google.com/maps?q=${position.latitude},${position.longitude}&z=18`;
    window.open(url, "_blank");
  }

  return (
    <>
      <Paper className={classes.paper} elevation={0} square>
        <Grid container direction="column">
          <Grid item>
            <List>
              <ListItem classes={{ container: classes.listItemContainer, root: classes.listItemRoot }} >
                <ListItemText primary={t('positionDatetime')} secondary={formatDate(position.serverTime)} />
              </ListItem>
              <ListItem classes={{ container: classes.listItemContainer, root: classes.listItemRoot }}>
                <ListItemText primary={t('positionSpeed')} secondary={formatSpeed(position.speed, speedUnit, t)} />
              </ListItem>
              {position.attributes.hours && (
                <ListItem classes={{ container: classes.listItemContainer, root: classes.listItemRoot }}>
                  <ListItemText primary={t('positionHours')} secondary={formatHours(position.attributes.hours, t)} />
                </ListItem>)}
              {position.address && (
                <ListItem classes={{ container: classes.listItemContainer, root: classes.listItemRoot }}>
                  <ListItemText primary={t('positionAddress')} secondary={position.address} />
                </ListItem>)}
            </List>
          </Grid>
          <Grid item container>
            <Grid item>
              <Button color="secondary" onClick={handleClick}>{t('sharedShowInfo')}</Button>
            </Grid>
            <Grid item>
              <IconButton onClick={onShowHistory}>
                <ReplayIcon />
              </IconButton>
            </Grid>
            <Grid item>
              <IconButton onClick={handleGotoLink}>
                <LinkIcon />
              </IconButton>
            </Grid>
            <Grid item>
              <IconButton onClick={handleCommandsClick}>
                <SendIcon />
              </IconButton>
            </Grid>
            <Grid item>
              <IconButton onClick={handleEditClick}>
                <EditIcon />
              </IconButton>
            </Grid>
            <Grid item>
              <IconButton onClick={handleRemove} className={classes.red}>
                <DeleteIcon />
              </IconButton>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
      <RemoveDialog open={removeDialogShown} endpoint="devices" itemId={deviceId} onResult={handleRemoveResult} />
    </>
  );
};

export default StatusView;