import PropTypes from 'prop-types';

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

// project import
import { useSelector } from 'store';

// assets
import { CheckCircleOutlined, CloseCircleOutlined, InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';

// Semantic notification colors — static (this app runs light-mode only), matching the
// brand palette used across the Astryx-converted pages (BRAND red for the default/
// primary notistack variant, standard semantic tones for error/success/info/warning).
const notistackColors = `
  .notistack-MuiContent-default { background-color: #C01227 !important; }
  .notistack-MuiContent-error { background-color: #ef4444 !important; }
  .notistack-MuiContent-success { background-color: #10b981 !important; }
  .notistack-MuiContent-info { background-color: #3b82f6 !important; }
  .notistack-MuiContent-warning { background-color: #f59e0b !important; }
`;

// ===========================|| SNACKBAR - NOTISTACK ||=========================== //

const Notistack = ({ children }) => {
  const snackbar = useSelector((state) => state.snackbar);
  const iconSX = { marginRight: 8, fontSize: '1.15rem' };

  return (
    <>
      <style>{notistackColors}</style>
      <SnackbarProvider
        maxSnack={snackbar.maxStack}
        dense={snackbar.dense}
        iconVariant={
          snackbar.iconVariant === 'useemojis'
            ? {
                success: <CheckCircleOutlined style={iconSX} />,
                error: <CloseCircleOutlined style={iconSX} />,
                warning: <WarningOutlined style={iconSX} />,
                info: <InfoCircleOutlined style={iconSX} />
              }
            : undefined
        }
        hideIconVariant={snackbar.iconVariant === 'hide' ? true : false}
      >
        {children}
      </SnackbarProvider>
    </>
  );
};

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

export default Notistack;