import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import makeStyles from '@mui/styles/makeStyles';
import {
IconButton, Tooltip, Avatar, ListItemAvatar, ListItemText, ListItemButton, Stack,
colors,
} from '@mui/material';
import LockIcon from '@mui/icons-material/Lock';
import LockOpenIcon from '@mui/icons-material/LockOpen';
import CircleIcon from '@mui/icons-material/Circle';
import BatteryFullIcon from '@mui/icons-material/BatteryFull';
import BatteryChargingFullIcon from '@mui/icons-material/BatteryChargingFull';
import Battery60Icon from '@mui/icons-material/Battery60';
import BatteryCharging60Icon from '@mui/icons-material/BatteryCharging60';
import Battery20Icon from '@mui/icons-material/Battery20';
import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
import SpeedIcon from '@mui/icons-material/Speed';
import ScheduleIcon from '@mui/icons-material/Schedule';
import PlaceIcon from '@mui/icons-material/Place';
import AvTimerIcon from '@mui/icons-material/AvTimer';
import ErrorIcon from '@mui/icons-material/Error';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { devicesActions } from '../store';
import {
formatAlarm, formatBoolean, formatPercentage, formatStatus, getStatusColor,
} from '../common/util/formatter';
import { useTranslation } from '../common/components/LocalizationProvider';
import { mapIconKey, mapIcons } from '../map/core/preloadImages';
import { useAdministrator } from '../common/util/permissions';
import EngineIcon from '../resources/images/data/engine.svg?react';
import { useAttributePreference } from '../common/util/preferences';
import usePositionAttributes from '../common/attributes/usePositionAttributes';
import PositionValue from '../common/components/PositionValue';
dayjs.extend(relativeTime);
const useStyles = makeStyles((theme) => ({
icon: {
width: '25px',
height: '25px',
filter: 'brightness(0) invert(1)',
},
batteryText: {
fontSize: '0.75rem',
fontWeight: 'normal',
lineHeight: '0.875rem',
},
success: {
color: theme.palette.success.main,
},
warning: {
color: theme.palette.warning.main,
},
error: {
color: theme.palette.error.main,
},
neutral: {
color: theme.palette.neutral.main,
},
}));
const DeviceRow = ({ data, index, style }) => {
const classes = useStyles();
const dispatch = useDispatch();
const t = useTranslation();
const admin = useAdministrator();
const item = data[index];
const position = useSelector((state) => state.session.positions[item.id]);
const devicePrimary = useAttributePreference('devicePrimary', 'name');
const deviceSecondary = useAttributePreference('deviceSecondary', '');
const positionAttributes = usePositionAttributes(t);
const positionItems = ['speed', 'address', 'hours', 'serverTime'];
const primaryText = () => {
// RATIONALE: we connect output/out1 to engine lock
let lock = undefined;
if (position) {
if (position.attributes.hasOwnProperty('output')) {
lock = position.attributes.output === 1;
} else if (position.attributes.hasOwnProperty('out1')) {
lock = position.attributes.out1;
}
}
return (
<>
{position && position.attributes.hasOwnProperty('ignition') && position.attributes.ignition
?