'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var art = require('@wise/art');
var clsx = require('clsx');
var React = require('react');
var Body = require('../body/Body.js');
require('../common/theme.js');
require('../common/direction.js');
require('@transferwise/neptune-tokens');
require('../common/propsValues/control.js');
require('../common/propsValues/size.js');
var typography = require('../common/propsValues/typography.js');
require('../common/propsValues/width.js');
require('../common/propsValues/type.js');
require('../common/propsValues/dateMode.js');
require('../common/propsValues/monthFormat.js');
require('../common/propsValues/position.js');
require('../common/propsValues/layouts.js');
require('../common/propsValues/status.js');
require('../common/propsValues/sentiment.js');
require('../common/propsValues/profileType.js');
require('../common/propsValues/variant.js');
require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
require('@transferwise/formatting');
var icons = require('@transferwise/icons');
var reactIntl = require('react-intl');
var CloseButton_messages = require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var Link = require('../link/Link.js');
var IconButton = require('../iconButton/IconButton.js');

const STORAGE_NAME = 'dismissedNudges';
const getLocalStorage = () => {
  try {
    const storageItem = localStorage.getItem(STORAGE_NAME);
    if (storageItem) {
      const storage = JSON.parse(storageItem);
      if (Array.isArray(storage)) {
        return storage.map(item => String(item));
      }
    }
  } catch (error) {}
  return [];
};
const Nudge = ({
  mediaName,
  title,
  link,
  href,
  onClick,
  onDismiss,
  persistDismissal,
  isPreviouslyDismissed,
  id,
  className,
  action
}) => {
  const intl = reactIntl.useIntl();
  const getIsDismissed = React.useCallback(() => persistDismissal && id ? !!getLocalStorage()?.find(item => item === id) : false, [persistDismissal, id]);
  const [nudgeState, setNudgeState] = React.useState(() => ({
    isDismissed: getIsDismissed(),
    isMounted: false
  }));
  React.useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect
    setNudgeState(prev => ({
      ...prev,
      isMounted: true
    }));
  }, []);
  React.useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change
    setNudgeState(prev => ({
      ...prev,
      isDismissed: getIsDismissed()
    }));
  }, [getIsDismissed, id, persistDismissal]);
  const {
    isDismissed
  } = nudgeState;
  const handleOnDismiss = () => {
    const dismissedNudgesStorage = getLocalStorage();
    if (persistDismissal && id) {
      try {
        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));
      } catch {}
      setNudgeState(prev => ({
        ...prev,
        isDismissed: true
      }));
    }
    if (onDismiss) {
      onDismiss();
    }
  };
  React.useEffect(() => {
    if (persistDismissal && id && isPreviouslyDismissed) {
      const dismissedNudgesStorage = getLocalStorage();
      const wasDismissed = !!dismissedNudgesStorage?.find(item => item === id);
      isPreviouslyDismissed(wasDismissed);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id, persistDismissal]);
  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {
    return null;
  }
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: clsx.clsx('wds-nudge', className),
    id: id,
    children: [!!mediaName && /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "wds-nudge-media",
      children: /*#__PURE__*/jsxRuntime.jsx(art.Illustration, {
        name: mediaName,
        className: clsx.clsx(`wds-nudge-media-${mediaName}`),
        size: "small",
        disablePadding: true,
        alt: ""
      })
    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "wds-nudge-container",
      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "wds-nudge-content",
        children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
          type: typography.Typography.BODY_LARGE,
          className: clsx.clsx('wds-nudge-body'),
          children: title
        }), link && /*#__PURE__*/jsxRuntime.jsx(Link.default, {
          href: href,
          type: typography.Typography.LINK_LARGE,
          className: "wds-nudge-link",
          onClick: onClick,
          children: link
        }), action && /*#__PURE__*/jsxRuntime.jsx(Link.default, {
          href: action.href,
          target: action.target,
          className: "m-t-1",
          "aria-label": action['aria-label'],
          type: typography.Typography.LINK_LARGE,
          onClick: action.onClick,
          children: action.text
        })]
      }), onDismiss || persistDismissal ? /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
        size: 24,
        priority: "tertiary",
        "aria-label": intl.formatMessage(CloseButton_messages.default.ariaLabel),
        onClick: handleOnDismiss,
        children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {})
      }) : null]
    })]
  });
};

exports.STORAGE_NAME = STORAGE_NAME;
exports.default = Nudge;
//# sourceMappingURL=Nudge.js.map
