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 DialogTitle from '@mui/material/DialogTitle';
import { Datetime } from '@Format';
import { RootState } from './rootReducer';
import { Trans } from '@lingui/macro';
import { closeHistory } from './historySlice';
import { useDispatch, useSelector } from 'react-redux';
import React from 'react';

export default function CloneTaskDialog() {
  const d = useDispatch();
  const history = useSelector((s: RootState) => s.history.history);
  const open = useSelector((s: RootState) => s.history.isOpen);

  const handleClose = () => {
    d(closeHistory());
  };

  return (
    <Dialog onClose={handleClose} open={open}>
      <DialogTitle>
        <Trans>History</Trans>
      </DialogTitle>
      <DialogContent>
        <table>
          {history.map((v) => (
            <tr key={v.aud_id}>
              <td>
                <Datetime datetime={v.aud_timestamp} />
                <br />
                {v.aud_krzl}
              </td>
              <td>{v.aud_text}</td>
            </tr>
          ))}
        </table>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose}>
          <Trans>Close</Trans>
        </Button>
      </DialogActions>
    </Dialog>
  );
}