import React, { useEffect, useState } from 'react';
import { FormControl, InputLabel, Select, MenuItem, TextField } from '@material-ui/core';
import t from '../common/localization';
import { useSelector } from 'react-redux';
import moment from 'moment';
const FilterForm = ({ deviceId, setDeviceId, from, setFrom, to, setTo }) => {
const devices = useSelector(state => Object.values(state.devices.items));
const [period, setPeriod] = useState('today');
useEffect(() => {
switch (period) {
default:
case 'today':
setFrom(moment().startOf('day'));
setTo(moment().endOf('day'));
break;
case 'yesterday':
setFrom(moment().subtract(1, 'day').startOf('day'));
setTo(moment().subtract(1, 'day').endOf('day'));
break;
case 'thisWeek':
setFrom(moment().startOf('week'));
setTo(moment().endOf('week'));
break;
case 'previousWeek':
setFrom(moment().subtract(1, 'week').startOf('week'));
setTo(moment().subtract(1, 'week').endOf('week'));
break;
case 'thisMonth':
setFrom(moment().startOf('month'));
setTo(moment().endOf('month'));
break;
case 'previousMonth':
setFrom(moment().subtract(1, 'month').startOf('month'));
setTo(moment().subtract(1, 'month').endOf('month'));
break;
}
}, [period, setFrom, setTo]);
return (
<>
{t('reportDevice')}
{t('reportPeriod')}
{period === 'custom' &&
setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
fullWidth />
}
{period === 'custom' &&
setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
fullWidth />
}
>
);
}
export default FilterForm;