import React, { useState } from 'react';
import { DataGrid } from '@material-ui/data-grid';
import {
  Grid, FormControl, InputLabel, Select, MenuItem, Typography
} from '@material-ui/core';
import { useTheme } from '@material-ui/core/styles';
import { useSelector } from 'react-redux';
import { formatDate } from '../common/formatter';
import ReportFilter from './ReportFilter';
import ReportLayout from './ReportLayout';
import { prefixString } from '../common/stringUtils';
import { useTranslation } from '../LocalizationProvider';

const Filter = ({ setItems }) => {
  const t = useTranslation();

  const [eventTypes, setEventTypes] = useState([
    'deviceInactive',
    'deviceMoving',
    'deviceStopped',
    'deviceOverspeed',
    'deviceFuelDrop',
    'commandResult',
    'geofenceEnter',
    'geofenceExit',
    'alarm',
    'ignitionOn',
    'ignitionOff',
    'maintenance',
    'textMessage',
    'driverChanged',
  ]);

  const renderSelectedEvents = (value) => {
    return (
      <Typography>
          {t('sharedSelectedOptions', {0: value.length})}
      </Typography>
    );
  }

  const handleSubmit = async (deviceId, from, to, mail, headers) => {
    let items = {};
    const query = new URLSearchParams({
      deviceId, from, to, mail,
    });
    /* fetch events */
    eventTypes.forEach((it) => query.append('type', it));
    const response = await fetch(`/api/reports/events?${query.toString()}`, { headers });
    if (response.ok) {
      const contentType = response.headers.get('content-type');
      if (contentType) {
        if (contentType === 'application/json') {
          items['events'] = await response.json();
        } else {
          window.location.assign(window.URL.createObjectURL(await response.blob()));
          return;
        }
      }
    }
    /* fetch positions, but only if application/json */
    const response2 = await fetch(`/api/reports/route?${query.toString()}`, { headers });
    if (response2.ok) {
      const contentType = response2.headers.get('content-type');
      if (contentType) {
        if (contentType === 'application/json') {
          items['positions'] = await response2.json();
          setItems(items);
        }
      }
    }
  };

  return (
    <ReportFilter handleSubmit={handleSubmit}>
      <Grid item xs={12} sm={6}>
          <FormControl variant="filled" fullWidth>
          <InputLabel>{t('reportEventTypes')}</InputLabel>
          <Select value={eventTypes} renderValue={renderSelectedEvents} onChange={(e) => setEventTypes(e.target.value)} multiple>
            {/*<MenuItem value="allEvents">{t('eventAll')}</MenuItem>*/}
            {/*<MenuItem value="deviceOnline">{t('eventDeviceOnline')}</MenuItem>*/}
            {/*<MenuItem value="deviceUnknown">{t('eventDeviceUnknown')}</MenuItem>*/}
            {/*<MenuItem value="deviceOffline">{t('eventDeviceOffline')}</MenuItem>*/}
            <MenuItem value="deviceInactive">{t('eventDeviceInactive')}</MenuItem>
            <MenuItem value="deviceMoving">{t('eventDeviceMoving')}</MenuItem>
            <MenuItem value="deviceStopped">{t('eventDeviceStopped')}</MenuItem>
            <MenuItem value="deviceOverspeed">{t('eventDeviceOverspeed')}</MenuItem>
            <MenuItem value="deviceFuelDrop">{t('eventDeviceFuelDrop')}</MenuItem>
            <MenuItem value="commandResult">{t('eventCommandResult')}</MenuItem>
            <MenuItem value="geofenceEnter">{t('eventGeofenceEnter')}</MenuItem>
            <MenuItem value="geofenceExit">{t('eventGeofenceExit')}</MenuItem>
            <MenuItem value="alarm">{t('eventAlarm')}</MenuItem>
            <MenuItem value="ignitionOn">{t('eventIgnitionOn')}</MenuItem>
            <MenuItem value="ignitionOff">{t('eventIgnitionOff')}</MenuItem>
            <MenuItem value="maintenance">{t('eventMaintenance')}</MenuItem>
            <MenuItem value="textMessage">{t('eventTextMessage')}</MenuItem>
            <MenuItem value="driverChanged">{t('eventDriverChanged')}</MenuItem>
          </Select>
        </FormControl>
      </Grid>
    </ReportFilter>
  );
};

const EventReportPage = () => {
  const theme = useTheme();
  const t = useTranslation();

  const geofences = useSelector((state) => state.geofences.items);

  const [items, setItems] = useState({positions: [], events: []});

  const formatGeofence = (value) => {
    if (value > 0) {
      const geofence = geofences[value];
      return geofence ? geofence.name : '';
    }
    return '';
  };

  const formatAddress = (value) => {
    if (value > 0) {
      const position = items.positions.find(p => p.id === value);
      return position && position.address ? position.address : '';
    }
    return '';
  };

  const columns = [{
    headerName: t('positionFixTime'),
    field: 'eventTime',
    type: 'dateTime',
    width: theme.dimensions.columnWidthDate,
    valueFormatter: ({ value }) => formatDate(value),
  }, {
    headerName: t('sharedType'),
    field: 'type',
    type: 'string',
    width: theme.dimensions.columnWidthString,
    valueFormatter: ({ value }) => t(prefixString('event', value)),
  }, {
    headerName: t('sharedGeofence'),
    field: 'geofenceId',
    width: theme.dimensions.columnWidthString,
    valueFormatter: ({ value }) => formatGeofence(value),
  }, {
    headerName: t('sharedMaintenance'),
    field: 'maintenanceId',
    type: 'number',
    hide: true,
    width: theme.dimensions.columnWidthString,
  }, {
    headerName: t('positionAddress'),
    field: 'positionId',
    type: 'string',
    width: theme.dimensions.columnWidthString,
    valueFormatter: ({ value }) => formatAddress(value),
  }];

  return (
    <ReportLayout filter={<Filter setItems={setItems} />}>
        <DataGrid
          rows={items.events}
          columns={columns}
          hideFooter
          autoHeight
        />
    </ReportLayout>
  );
};

export default EventReportPage;