import CircularProgress from '@mui/material/CircularProgress';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import { Trans } from '@lingui/macro';
import { useDispatch, useSelector } from 'react-redux';
import React from 'react';

import { useFetchOverview } from '~/js/components/stats/Modal/hooks';
import Form from '~/js/components/stats/Modal/Forms/index';
import History from '~/js/components/stats/Modal/History';
import Status from '~/js/components/stats/Modal/Status';

import { RootState } from './rootReducer';
import { closeForm } from './counterFormSlice';

const StatsModal = () => {
  const d = useDispatch();
  const { isOpen, ID, name } = useSelector((s: RootState) => s.counterForm);
  const { isError, isLoading, overview } = useFetchOverview(ID, isOpen);
  const isReady = isLoading === false && isError === false;

  const errorView = isError && <Trans>error</Trans>;
  const loadingView = isLoading && <CircularProgress />;

  const statusView = isReady && (
    <Status isActive={overview.isActive} nextTime={overview.nextTime} />
  );
  const historyView = isReady && (
    <History data={overview.results} isCounter={true} />
  );

  const handleCloseOnSubmit = () => {
    d(closeForm());
  };

  const handleClose = () => d(closeForm());

  const formView = isReady && (
    <Form
      resourceID={ID}
      counterType={overview.type}
      closeDialog={handleCloseOnSubmit}
    />
  );

  return (
    <Dialog fullWidth maxWidth='xs' open={isOpen} onClose={handleClose}>
      <DialogTitle>{name}</DialogTitle>
      <DialogContent>
        {errorView}
        {loadingView}
        {statusView}
        {historyView}
        {formView}
      </DialogContent>
    </Dialog>
  );
};

export default StatsModal;