import React, { useState, useEffect, useRef } from 'react';
import classnames from 'classnames';
import { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';
import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons/faCircleExclamation';
import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
import { Button, ACCENT_TYPES } from '../button';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { NOTIFICATION_LEVEL, MIN_DISMISS_DELAY, MAX_DISMISS_DELAY } from './types';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const {
  INFO,
  SUCCESS,
  WARNING,
  FAILURE
} = NOTIFICATION_LEVEL;
function isActionButtonVisible(notification) {
  return !!notification?.action;
}
function isActionLinkVisible(notification) {
  return !!notification?.href;
}
const getLinkComponent = ({
  LinkComponent,
  ...props
}) => LinkComponent ? /*#__PURE__*/_jsx(LinkComponent, {
  className: "anchor notification-action",
  testId: "notification-popup-action",
  ...props
}) : /*#__PURE__*/_jsx("a", {
  href: props.href,
  className: "anchor notification-action",
  "test-id": "notification-popup-action",
  target: props.target,
  children: /*#__PURE__*/_jsxs("span", {
    children: [props.actionIcon && /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: props.actionIcon,
      "test-id": "notification-popup-action-icon",
      className: "notification-action-icon"
    }), props.title]
  })
});
function getIcon(notification) {
  switch (notification.level) {
    case INFO:
      return faCircleInfo;
    case SUCCESS:
      return faCircleCheck;
    case WARNING:
      return faCircleExclamation;
    case FAILURE:
      return faCircleXmark;
    default:
      return faCircleInfo;
  }
}
/**
 * Notification Popup.
 * Used to provide feedback about recent user actions.
 * Use NotificationPopupService to show a notification.
 * Use <NotificationPopupContainer /> where to display a notifications.
 * Different types of notifications are supported.
 * Notification can be actionable.
 * Notification disappears automatically after a specific amount of time
 * or can be dismissed immediately.
 * [CAPITALIZATION] Use sentence case
 * [CAPITALIZATION] Keep as brief as possible, ideally not a complete sentence/no punctuation at the end
 * [CAPITALIZATION] If you feel there are multiple thoughts (sentences), use punctuation. But consider whether a popup notification is appropriate.
 * @midnight-gray-supported
 * @alpine-light-supported
 * */
export function NotificationPopup({
  notification,
  onHidden,
  closeButtonText
}) {
  const [isVisible, setVisibility] = useState(true);
  const dismissTimer = useRef(null);
  useEffect(() => {
    if (notification?.level === NOTIFICATION_LEVEL.FAILURE || notification?.disableAutoDismiss) {
      return;
    }
    clearDismissTimerTimeout();
    setVisibility(true);
    const dismissDelay = isActionButtonVisible(notification) ? MAX_DISMISS_DELAY : MIN_DISMISS_DELAY;

    // We can't fix this without making some breaking changes
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    dismissTimer.current = setTimeout(() => {
      setVisibility(false);
    }, dismissDelay);
    return () => {
      clearDismissTimerTimeout();
    };
  }, []);
  function handleActionApply() {
    notification.action?.();
    handleDismiss();
  }
  function clearDismissTimerTimeout() {
    if (dismissTimer.current) {
      clearTimeout(dismissTimer.current);
    }
  }
  function handleDismiss() {
    clearDismissTimerTimeout();
    setVisibility(false);
    onHidden(notification);
  }
  function handleNotificationCleanup() {
    if (!isVisible) {
      onHidden(notification);
    }
  }
  if (!notification) {
    return null;
  }
  return /*#__PURE__*/_jsxs("div", {
    className: classnames('notification-popup', notification.level.toLowerCase(), {
      dismissed: !isVisible
    }),
    onAnimationEnd: handleNotificationCleanup,
    "test-id": "notification-popup",
    role: "alert",
    children: [/*#__PURE__*/_jsx("span", {
      className: "notification-icon",
      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
        icon: getIcon(notification),
        "test-id": "notification-popup-glyph"
      })
    }), /*#__PURE__*/_jsxs("div", {
      className: "notification-content",
      children: [/*#__PURE__*/_jsxs("div", {
        children: [/*#__PURE__*/_jsx("p", {
          className: "notification-text",
          "test-id": "notification-text",
          children: notification.message
        }), isActionButtonVisible(notification) ? /*#__PURE__*/_jsx(Button, {
          accentType: ACCENT_TYPES.COMMAND,
          onClick: handleActionApply,
          leftIcon: notification.actionIcon,
          className: "notification-action",
          testId: "notification-popup-action",
          children: notification.title
        }) : null, isActionLinkVisible(notification) && getLinkComponent(notification)]
      }), /*#__PURE__*/_jsx(Button, {
        className: "notification-dismiss",
        accentType: ACCENT_TYPES.COMMAND,
        "aria-label": closeButtonText,
        onClick: handleDismiss,
        testId: "notification-popup-dismiss",
        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
          icon: faXmark
        })
      })]
    })]
  });
}