import React, { useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import Grid from '@material-ui/core/Grid';
import ListItemText from '@material-ui/core/ListItemText';
import SvgIcon from '@material-ui/core/SvgIcon';
import { FixedSizeList } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
import BatteryFullIcon from '@material-ui/icons/BatteryFull';
import { ReactComponent as IgnitionIcon } from '../public/images/ignition.svg';

import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
import PersonIcon from '@material-ui/icons/Person';
import SpeedIcon from '@material-ui/icons/Speed';
import CalendarTodayIcon from '@material-ui/icons/CalendarToday';
import LockIcon from '@material-ui/icons/Lock';
import LockOpenIcon from '@material-ui/icons/LockOpen';

import { devicesActions, uiActions } from './store';
import EditCollectionView from './EditCollectionView';
import { useEffectAsync } from './reactHelper';
import { formatPosition, formatSpeed, formatHours } from './common/formatter';
import { useAttributePreference } from './common/preferences';
import { getDevices, getFilteredDevices, getFilterTerm, getPosition } from './common/selectors';
import { useTranslation } from './LocalizationProvider';

const useStyles = makeStyles((theme) => ({
  list: {
    maxHeight: '100%',
  },
  listInner: {
    position: 'relative',
    margin: theme.spacing(1.5, 0),
  },
  icon: {
    width: '40px',
    height: '40px',
  },
  statusIcon: {
    paddingRight: '5px',
  },
  listItem: {
    backgroundColor: 'white',
    '&:hover': {
      backgroundColor: 'white',
    },
    height: '150px',
  },
  listItemSecondary: {
    fontSize: '0.92rem',
  },
  batteryText: {
    fontSize: '0.75rem',
    fontWeight: 'normal',
    lineHeight: '0.875rem',
  },
  green: {
    color: theme.palette.common.green,
  },
  red: {
    color: theme.palette.common.red,
  },
  gray: {
    color: theme.palette.common.gray,
  },
  indicators: {
    lineHeight: 1,
  },
}));

const getBatteryStatus = (batteryLevel) => {
  if (batteryLevel >= 70) {
    return 'green';
  }
  if (batteryLevel > 30) {
    return 'gray';
  }
  return 'red';
};

const DeviceRow = ({ data, index, style }) => {
  const classes = useStyles();
  const dispatch = useDispatch();
  const t = useTranslation();

  const speedUnit = useAttributePreference('speedUnit');

  const { items } = data;
  const item = items[index];
  const position = useSelector(getPosition(item.id));
  const showIgnition = position?.attributes.hasOwnProperty('ignition') && position.attributes.ignition === true;

  const statusColor = () => {
    if (position && position.speed >= 2) {
      return 'primary';
    } else {
      return 'error';
    }
  };

  return (
    <div style={style}>
      <ListItem button key={item.id} className={classes.listItem} onClick={() => {
        dispatch(devicesActions.select(item));
        dispatch(uiActions.setCollapsed(true));
        setTimeout(() => {
          dispatch(devicesActions.unselect());
        }, 1000);
      }}>
        {/* Avatar */}
        <ListItemAvatar>
          <img className={classes.icon} src={`images/icon/${(item.category || 'default').toLowerCase()}.png`} alt="" />
        </ListItemAvatar>
        
        {/* Status icon */}
        <ListItemText primary={
          <>
            <FiberManualRecordIcon fontSize="inherit" color={statusColor()} classes={{ colorPrimary: classes.green }} />
            {position && position.attributes.out1 == false && (
              <LockOpenIcon fontSize="inherit" color="primary" classes={{ colorPrimary: classes.green }} />
            )}
            {position && position.attributes.out1 == true && (
              <LockIcon fontSize="inherit" color="error" />
            )}
            {` ${item.name}`}
          </>} secondary={(
            <>
              {/* Contact */}
              {item.contact && (
                <>
                  <PersonIcon fontSize="inherit" /> {item.contact}<br />
                </>
              )}
              {position && (
                <>
                  {/* Speed */}
                  <SpeedIcon fontSize="inherit" /> {formatSpeed(position.speed, speedUnit, t)}<br />
                  {/* Datetime */}
                  <CalendarTodayIcon fontSize="inherit" /> {formatPosition(position, 'fixTime', t)}
                  {/* Hours */}
                  {item.category
                    && (item.category.toLowerCase() === 'backhoe' || item.category.toLowerCase() === 'tractor' )
                    && position.attributes.hours
                    && position.attributes.hours > 1
                    && ` (${formatHours(position.attributes.hours, t)})`}
                </>
              )}
            </>
          )} classes={{ secondary: classes.listItemSecondary }} />
        <ListItemSecondaryAction className={classes.indicators}>
          {position && (
            <Grid container direction="row" alignItems="center" alignContent="center" spacing={2}>
              {/* Ignition */}
              {showIgnition && (
                <Grid item>
                  <SvgIcon component={IgnitionIcon} />
                </Grid>
              )}
              {/* Battery level */}
              {position.attributes.hasOwnProperty('batteryLevel') && (
                <Grid item container xs alignItems="center" alignContent="center">
                  <Grid item>
                    <span className={classes.batteryText}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel', t)}</span>
                  </Grid>
                  <Grid item>
                    <BatteryFullIcon className={classes[getBatteryStatus(position.attributes.batteryLevel)]} />
                  </Grid>
                </Grid>
              )}
            </Grid>
          )}
        </ListItemSecondaryAction>
      </ListItem>
    </div>
  );
};

const DeviceView = ({ updateTimestamp, onMenuClick }) => {
  const classes = useStyles();
  const dispatch = useDispatch();
  const listInnerEl = useRef(null);

  const filterTerm = useSelector(getFilterTerm);
  const filteredItems = useSelector(getFilteredDevices);
  const unfilteredItems = useSelector(getDevices);

  const items = (filterTerm.length > 0 ? filteredItems : unfilteredItems).sort((a, b) => a.name.localeCompare(b.name));

  if (listInnerEl.current) {
    listInnerEl.current.className = classes.listInner;
  }

  useEffectAsync(async () => {
    const response = await fetch('/api/devices');
    if (response.ok) {
      dispatch(devicesActions.refresh(await response.json()));
    }
  }, [updateTimestamp]);

  return (
    <AutoSizer className={classes.list}>
      {({ height, width }) => (
        <List disablePadding>
          <FixedSizeList
            width={width}
            height={height}
            itemCount={items.length}
            itemData={{ items, onMenuClick }}
            itemSize={150}
            overscanCount={10}
            innerRef={listInnerEl}
          >
            {DeviceRow}
          </FixedSizeList>
        </List>
      )}
    </AutoSizer>
  );
};

const DevicesList = () => (
  <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" disableAdd />
);

export default DevicesList;