import { useCallback } from 'react';

// biome-ignore lint/style/noRestrictedImports: intentionally bypassing material-hu wrapper to customize snackbar width
import { useSnackbar as useNotistackSnackbar } from 'notistack';
import CloseIcon from '@material-hu/icons/material/Close';
import {
  IconAlertTriangle,
  IconCheck,
  IconInfoCircle,
  IconX,
} from '@material-hu/icons/tabler';
import { SnackbarContent } from '@material-hu/mui';
import Badge from '@material-hu/mui/Badge';
import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import LinearProgress from '@material-hu/mui/LinearProgress';
import Stack from '@material-hu/mui/Stack';
import { keyframes, useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { type SnackbarProps } from '@material-hu/components/design-system/Snackbar/types';

const globalXSBase = {
  fontFamily: 'Roboto',
  lineHeight: '140%',
  fontWeight: 400,
  letterSpacing: 0.2,
  fontSize: 14,
};

const useProdeSnackbar = () => {
  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } =
    useNotistackSnackbar();
  const theme = useTheme();
  const backgroundColor = theme.palette.new.background.elements.inverted;

  const getProps = useCallback(
    (variant: SnackbarProps['variant']) => {
      switch (variant) {
        case 'warning':
          return {
            Icon: IconAlertTriangle,
            color: theme.palette.new.border.states.warning,
            iconColor:
              (theme.palette as any).newBase?.yellow[600] ??
              theme.palette.warning.main,
          };
        case 'info':
          return {
            Icon: IconInfoCircle,
            color: theme.palette.new.border.states.info,
            iconColor:
              (theme.palette as any).newBase?.skyBlue[600] ??
              theme.palette.info.main,
          };
        case 'error':
          return {
            Icon: IconX,
            color: theme.palette.new.border.states.error,
            iconColor:
              (theme.palette as any).newBase?.red[600] ??
              theme.palette.error.main,
          };
        default:
        case 'success':
          return {
            Icon: IconCheck,
            color: theme.palette.new.border.states.success,
            iconColor:
              (theme.palette as any).newBase?.green[600] ??
              theme.palette.success.main,
          };
      }
    },
    [theme],
  );

  const enqueueSnackbar = useCallback(
    (props: SnackbarProps) => {
      const {
        title,
        description,
        hasClose = true,
        cancelAction,
        variant,
        spacing,
        autoHideDuration = 6000,
      } = props;
      const { Icon, color, iconColor } = getProps(variant);
      const progressAnimation = keyframes`from { width: 0%; } to { width: 100%; }`;
      const progressDuration = autoHideDuration * 0.8;
      const PADDING = 8;
      const durations = {
        hide: cancelAction ? autoHideDuration + 2000 : autoHideDuration,
        progress: cancelAction ? progressDuration + 2000 : progressDuration,
      };

      return enqueueNotistackSnackbar('', {
        autoHideDuration: durations.hide,
        anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
        onEnter: () => {
          const snackbarElement = document.querySelector(
            '.notistack-SnackbarContainer',
          ) as HTMLElement | null;
          if (snackbarElement) {
            if (spacing?.bottom) {
              snackbarElement.style.bottom = `${spacing.bottom + PADDING}px`;
            }
            if (spacing?.top) {
              snackbarElement.style.top = `${spacing.top + PADDING}px`;
            }
            if (spacing?.left) {
              snackbarElement.style.left = `${spacing.left + PADDING}px`;
            }
            if (spacing?.right) {
              snackbarElement.style.right = `${spacing.right + PADDING}px`;
            }
          }
        },
        content: key => (
          <div
            style={{
              borderRadius: '8px',
              overflow: 'hidden',
              width: 600,
              maxWidth: 'calc(100vw - 32px)',
              position: 'relative',
            }}
          >
            <SnackbarContent
              style={{
                backgroundColor,
                display: 'flex',
                borderRadius: 0,
              }}
              message={
                <Stack
                  sx={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 1,
                    ml: 1,
                    maxWidth: cancelAction ? 400 : '99%',
                  }}
                >
                  <Badge
                    badgeContent={
                      <Box
                        sx={{
                          width: 16,
                          height: 16,
                          display: 'flex',
                          alignItems: 'center',
                        }}
                      >
                        <Icon />
                      </Box>
                    }
                    overlap="circular"
                    sx={{
                      mr: 2,
                      mb: title && description ? 2 : 0,
                      '.MuiBadge-badge': {
                        backgroundColor: iconColor,
                        minWidth: 24,
                        minHeight: 24,
                        borderRadius: '50%',
                        padding: 0,
                      },
                    }}
                  />
                  <Stack>
                    {title && (
                      <Typography
                        sx={{
                          ...globalXSBase,
                          fontSize: 16,
                          fontWeight: 500,
                          color: theme.palette.new.text.neutral.inverted,
                        }}
                      >
                        {title}
                      </Typography>
                    )}
                    {description && (
                      <Typography
                        sx={{
                          ...globalXSBase,
                          color: theme.palette.new.text.neutral.inverted,
                        }}
                      >
                        {description}
                      </Typography>
                    )}
                  </Stack>
                </Stack>
              }
              action={[
                cancelAction && (
                  <button
                    type="button"
                    key="cancelButton"
                    onClick={() => {
                      cancelAction.onClick();
                      closeSnackbar(key);
                    }}
                    style={{
                      background: 'none',
                      border: 'none',
                      cursor: 'pointer',
                      padding: '4px',
                      marginRight: 32,
                      color: theme.palette.new.text.neutral.inverted,
                      textDecoration: 'underline',
                      fontFamily: 'Roboto',
                      fontSize: 14,
                    }}
                  >
                    {cancelAction.text}
                  </button>
                ),
                hasClose && (
                  <IconButton
                    key="closeButton"
                    onClick={() => closeSnackbar(key)}
                    sx={{
                      p: 0,
                      top: 12,
                      right: 12,
                      fontSize: '12px',
                      position: 'absolute',
                      color: theme.palette.new.text.neutral.inverted,
                    }}
                  >
                    <CloseIcon
                      sx={{ fontSize: '16px' }}
                      color="inherit"
                    />
                  </IconButton>
                ),
              ]}
            />
            <LinearProgress
              variant="determinate"
              value={100}
              sx={{
                height: '6px',
                backgroundColor: color,
                '& .MuiLinearProgress-bar': {
                  backgroundColor: iconColor,
                  animation: `${progressAnimation} ${durations.progress / 1000}s linear`,
                },
              }}
            />
          </div>
        ),
      });
    },
    [enqueueNotistackSnackbar, closeSnackbar, getProps, backgroundColor, theme],
  );

  return { enqueueSnackbar, closeSnackbar };
};

export default useProdeSnackbar;