import PropTypes from 'prop-types';

// @mui
import { styled } from '@mui/material/styles';
import Fade from '@mui/material/Fade';
import Grow from '@mui/material/Grow';
import Slide from '@mui/material/Slide';
import Zoom from '@mui/material/Zoom';

// @third-party
import { SnackbarProvider } from 'notistack';

// @project
import { useGetSnackbar } from '@/states/snackbar';
import Loader from '@/components/Loader';

// @assets
import { IconAlertTriangle, IconBug, IconChecks, IconInfoCircle, IconSpeakerphone } from '@tabler/icons-react';

// custom styles
const StyledSnackbarProvider = styled(SnackbarProvider)(({ theme }) => ({
  '&.notistack-MuiContent': {
    color: theme.vars.palette.background.default
  },
  '&.notistack-MuiContent-default': {
    backgroundColor: theme.vars.palette.primary.main
  },
  '&.notistack-MuiContent-error': {
    backgroundColor: theme.vars.palette.error.main
  },
  '&.notistack-MuiContent-success': {
    backgroundColor: theme.vars.palette.success.main
  },
  '&.notistack-MuiContent-info': {
    backgroundColor: theme.vars.palette.info.main
  },
  '&.notistack-MuiContent-warning': {
    backgroundColor: theme.vars.palette.warning.main
  },
  '& #notistack-snackbar': {
    gap: 8
  }
}));

/***************************  SNACKBAR - ANIMATION  ***************************/

function TransitionSlideLeft(props) {
  return <Slide {...props} direction="left" />;
}

function TransitionSlideUp(props) {
  return <Slide {...props} direction="up" />;
}

function TransitionSlideRight(props) {
  return <Slide {...props} direction="right" />;
}

function TransitionSlideDown(props) {
  return <Slide {...props} direction="down" />;
}

function GrowTransition(props) {
  return <Grow {...props} />;
}

function ZoomTransition(props) {
  return <Zoom {...props} />;
}

const animation = {
  SlideLeft: TransitionSlideLeft,
  SlideUp: TransitionSlideUp,
  SlideRight: TransitionSlideRight,
  SlideDown: TransitionSlideDown,
  Grow: GrowTransition,
  Zoom: ZoomTransition,
  Fade
};

const iconSX = { fontSize: '1.15rem' };

/***************************  SNACKBAR - NOTISTACK  ***************************/

export default function Notistack({ children }) {
  const { snackbar } = useGetSnackbar();

  if (snackbar === undefined) return <Loader />;

  return (
    <StyledSnackbarProvider
      maxSnack={snackbar.maxStack}
      dense={snackbar.dense}
      anchorOrigin={snackbar.anchorOrigin}
      TransitionComponent={animation[snackbar.transition]}
      iconVariant={
        snackbar.iconVariant === 'useemojis'
          ? {
              default: <IconSpeakerphone style={iconSX} />,
              success: <IconChecks style={iconSX} />,
              error: <IconBug style={iconSX} />,
              warning: <IconAlertTriangle style={iconSX} />,
              info: <IconInfoCircle style={iconSX} />
            }
          : undefined
      }
      hideIconVariant={snackbar.iconVariant === 'hide' ? true : false}
    >
      {children}
    </StyledSnackbarProvider>
  );
}

Notistack.propTypes = { children: PropTypes.node };