import React, { forwardRef } from 'react';
import Snackbar from '@mui/material/Snackbar';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
import LinearProgress from '@mui/material/LinearProgress';

export interface NotificationToastProps {
  child: React.ReactNode;
  duration?: number;
}

export interface NotificationToastElement {
  showToast: (params: NotificationToastProps) => void;
}

const DefaultDurationMilisec = 15000;

const NotificationToast = forwardRef(
  (
    _: any,
    ref: React.ForwardedRef<NotificationToastElement>
  ): React.ReactElement => {
    const [open, setOpen] = React.useState(false);
    const [props, setProps] =
      React.useState<NotificationToastProps | null>(null);
    const duration = props?.duration ?? DefaultDurationMilisec;

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

    const showToast = (params: NotificationToastProps) => {
      setProps(params);
      setOpen(true);
    };

    React.useImperativeHandle(
      ref,
      (): NotificationToastElement => ({
        showToast,
      })
    );

    const [progress, setProgress] = React.useState(100);

    React.useEffect(() => {
      if (!open) setProgress(100);

      const interval = duration / 100;
      if (progress > 0 && open) {
        const timeoutId = setTimeout(() => {
          setProgress(progress - 1);
        }, interval);
        return () => {
          clearTimeout(timeoutId);
        };
      }
      return () => {};
    }, [progress, open]);

    return (
      <>
        {open && props && (
          <Snackbar
            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
            open={open}
            autoHideDuration={duration}
            onClose={handleClose}
            sx={{
              zIndex: 30000
            }}
          >
            <Box sx={{ position: 'relative', width: '326px' }}>
              <IconButton
                size="small"
                sx={{
                  position: 'absolute',
                  top: '8px',
                  right: '16px',
                  padding: 0,
                }}
                onClick={handleClose}
                aria-label="close"
              >
                <CloseOutlinedIcon />
              </IconButton>
              {props.child}
              <LinearProgress variant="determinate" value={progress} />
            </Box>
          </Snackbar>
        )}
      </>
    );
  }
);

export default NotificationToast;