import { FC, useEffect, useState } from 'react';

import Stack from '@material-hu/mui/Stack';
import { alpha } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

type PreparingLyaoutProps = {
  onReady: () => void;
};

const PreparingLyaout: FC<PreparingLyaoutProps> = props => {
  const { onReady } = props;
  const [countdown, setCountdown] = useState(3);

  useEffect(() => {
    if (countdown === 0) {
      onReady();
    }
  }, [countdown, onReady]);

  useEffect(() => {
    const interval = setInterval(() => {
      setCountdown(value => Math.max(value - 1, 0));
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <>
      <Stack
        sx={{
          position: 'absolute',
          width: '100%',
          top: 0,
          borderRadius: '12px',
          backgroundColor: theme => alpha(theme.palette.common.black, 0.5),
          opacity: 0.5,
          px: 2,
          aspectRatio: 16 / 9,
        }}
      ></Stack>
      <Stack
        sx={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
        }}
      >
        <Typography
          variant="h1"
          sx={{ color: theme => theme.palette.common.white }}
        >
          {countdown}
        </Typography>
      </Stack>
    </>
  );
};

export default PreparingLyaout;