import { Toast } from '@astryxdesign/core/Toast';
import { Button } from '@astryxdesign/core/Button';

// project-import
import { dispatch, useSelector } from 'store';
import { closeSnackbar } from 'store/reducers/snackbar';

// ==============================|| SNACKBAR ||============================== //
// Redux-driven single-toast surface (separate from the notistack-based `enqueueSnackbar`
// calls used elsewhere in the app). Rebuilt on Astryx's `Toast` primitive — `variant`
// picks default vs. alert-style presentation, `alert.color` maps onto Toast's narrower
// info/error `type`, and `anchorOrigin` positions the fixed wrapper the same way the MUI
// Snackbar's anchorOrigin used to.

const Snackbar = () => {
  const snackbar = useSelector((state) => state.snackbar);
  const { actionButton, anchorOrigin, alert, message, open, variant } = snackbar;

  const handleClose = () => dispatch(closeSnackbar());

  if (!open) return null;

  const isError = variant === 'alert' && alert?.color === 'error';
  const showUndo = variant === 'default' ? true : actionButton !== false;

  const vertical = anchorOrigin?.vertical === 'top' ? 'top' : 'bottom';
  const horizontal = anchorOrigin?.horizontal === 'left' ? 'left' : anchorOrigin?.horizontal === 'center' ? 'center' : 'right';

  return (
    <div
      style={{
        position: 'fixed',
        [vertical]: 24,
        ...(horizontal === 'center' ? { left: '50%', transform: 'translateX(-50%)' } : { [horizontal]: 24 }),
        zIndex: 1500
      }}
    >
      <Toast
        type={isError ? 'error' : 'info'}
        body={message}
        isAutoHide
        autoHideDuration={6000}
        endContent={
          showUndo ? (
            <Button label="Undo" size="sm" variant="ghost" onClick={handleClose}>
              UNDO
            </Button>
          ) : undefined
        }
        onDismiss={handleClose}
      />
    </div>
  );
};

export default Snackbar;