import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import TextField from '@mui/material/TextField';
import { RootState } from './rootReducer';
import { Trans } from '@lingui/macro';
import {
  requestTimeUpdate,
  setClose,
  setDate,
  setTime
} from './editTimeDialogSlice';
import { useDispatch, useSelector } from 'react-redux';
import React from 'react';

export default function EditTimeDialog() {
  const { isOpen, date, time } = useSelector((s: RootState) => s.editTimeDialog);
  const d = useDispatch();

  const handleClose = () => d(setClose());
  const handleSubmit = () => d(requestTimeUpdate());
  const handleDateChange = (e) => d(setDate(e.target.value));
  const handleTimeChange = (e) => d(setTime(e.target.value));

  return (
    <Dialog onClose={handleClose} open={isOpen}>
      <DialogContent>
        <Box m={3}>
          <TextField
            fullWidth
            size={'small'}
            type='date'
            label={<Trans>Date</Trans>}
            InputLabelProps={{ shrink: true }}
            onChange={handleDateChange}
            value={date}
          />
        </Box>
        <Box m={3}>
          <TextField
            fullWidth
            size={'small'}
            type='time'
            label={<Trans>Time</Trans>}
            InputLabelProps={{ shrink: true }}
            onChange={handleTimeChange}
            value={time}
          />
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose}>
          <Trans>Close</Trans>
        </Button>
        <Button onClick={handleSubmit}>
          <Trans>Change time</Trans>
        </Button>
      </DialogActions>
    </Dialog>
  );
}