import { useEffect } from 'react';

import { IconStopwatch } from '@material-hu/icons/tabler';
import Fab from '@material-hu/mui/Fab';
import Typography from '@material-hu/mui/Typography';

import useCountdownTimer from 'src/hooks/useCountdownTimer';

type EvaluationTimerProps = {
  taskDuration: number;
  onSubmit: () => void;
};

const EvaluationTimer = ({ taskDuration, onSubmit }: EvaluationTimerProps) => {
  const handleFinishTimer = () => {
    onSubmit();
    reset();
  };

  const { timer, start, reset } = useCountdownTimer(
    taskDuration,
    0,
    handleFinishTimer,
  );

  useEffect(() => {
    taskDuration && start();
  }, []);

  return (
    <Fab
      sx={{
        mt: 2,
        alignSelf: 'flex-end',
        position: 'sticky',
        bottom: 90,
      }}
      variant="circular"
    >
      <Typography
        variant="globalM"
        fontWeight="fontWeightBold"
        color="white"
        sx={{ mt: 0.5 }}
      >
        {timer}
      </Typography>
      <IconStopwatch size={10} />
    </Fab>
  );
};

export default EvaluationTimer;
