import React, { useEffect } from "react";
import { forwardRef } from 'react';
import { useTheme } from '@mui/material/styles';
import { StyledToast } from './styles';
import { SnackbarOrigin } from '@mui/material/Snackbar';
import MuiAlert, { AlertProps } from '@mui/material/Alert';
import Slide from '@mui/material/Slide';

interface ToastProps {
  message?: string,
  sx?: React.CSSProperties,
  openToast?: boolean,
  severity?: any,
  autoDuration?: number,
  direction?:string,
  setToastData?:any
}
export interface State extends SnackbarOrigin {
  open: boolean;
}
const Toast = forwardRef((props: ToastProps, ref) => {
  const theme = useTheme();
  const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
    props,
    ref,
  ) {
    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
  });
  const [state, setState] = React.useState<State>({
    open: false,
    vertical: 'top',
    horizontal: 'right',
  });

  const { vertical, horizontal, open } = state;
  const {
    sx,
    message,
    openToast = false,
    severity = 'success',
    autoDuration = 1500,
    direction="left",
    setToastData
  } = props;
  function TransitionLeft(props:any) {
    return <Slide {...props} direction={direction} />;
  }
  return (
    <StyledToast
      anchorOrigin={{ vertical, horizontal }}
      open={openToast}
      key={vertical + horizontal}
      theme={theme}
      TransitionComponent={TransitionLeft}
      sx={{
        ...sx,
        marginTop:7
      }}
      autoHideDuration={autoDuration}
    >
      <Alert onClose={()=>setToastData({...state,open:false})} severity={severity} sx={{ width: '100%' }}>
        {message}
      </Alert>
    </StyledToast>
  );
});
export default Toast;