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 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 InfoIcon from '@material-ui/icons/Info';
import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
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 session = useSelector((state) => state.session);
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 (
<>
{position.attributes.hours && (
)}
{position.address && (
)}
{!session.server.deviceReadonly && (
<>
>
)}
>
);
};
export default StatusView;