import CircularProgress from '@mui/material/CircularProgress';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import { Trans } from '@lingui/macro';
import I18nProvider from 'B/I18nProvider';
import React, { useState } from 'react';

import  Form  from './Forms/index';
import { store } from '../../../statsStore';
import { useFetchOverview } from './hooks';
import History from './History';
import Status from './Status';

const StatsModal: React.FC<{ id: number }> = ({ id }) => {
  const [open, setOpen] = useState(false);
  const { isError, isLoading, overview } = useFetchOverview(id, open);
  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 = () => {
    setOpen(false);
    store.dispatch({ type: 'GET_COUNTER' });
  };

  const handleClose = () => {
    setOpen(false);
  };

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

  const handleOpen = () => {
    setOpen(true);
  };

  return (
    <I18nProvider>
      <i className={'fas fa-plus icon--blue'} onClick={handleOpen} />
      <Dialog open={open} onClose={handleClose}>
        <DialogContent>
          {errorView}
          {loadingView}
          {statusView}
          {historyView}
          {formView}
        </DialogContent>
      </Dialog>
    </I18nProvider>
  );
};

export default StatsModal;