import { Illustration } from '@wise/art';
import { clsx } from 'clsx';
import { useCallback, useState, useEffect } from 'react';
import Body from '../body/Body.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../common/propsValues/control.mjs';
import '../common/propsValues/size.mjs';
import { Typography } from '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import '@transferwise/formatting';
import { Cross } from '@transferwise/icons';
import { useIntl } from 'react-intl';
import closeBtnMessages from '../common/closeButton/CloseButton.messages.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import Link from '../link/Link.mjs';
import IconButton from '../iconButton/IconButton.mjs';

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 = useIntl();
  const getIsDismissed = useCallback(() => persistDismissal && id ? !!getLocalStorage()?.find(item => item === id) : false, [persistDismissal, id]);
  const [nudgeState, setNudgeState] = useState(() => ({
    isDismissed: getIsDismissed(),
    isMounted: false
  }));
  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect
    setNudgeState(prev => ({
      ...prev,
      isMounted: true
    }));
  }, []);
  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();
    }
  };
  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__*/jsxs("div", {
    className: clsx('wds-nudge', className),
    id: id,
    children: [!!mediaName && /*#__PURE__*/jsx("div", {
      className: "wds-nudge-media",
      children: /*#__PURE__*/jsx(Illustration, {
        name: mediaName,
        className: clsx(`wds-nudge-media-${mediaName}`),
        size: "small",
        disablePadding: true,
        alt: ""
      })
    }), /*#__PURE__*/jsxs("div", {
      className: "wds-nudge-container",
      children: [/*#__PURE__*/jsxs("div", {
        className: "wds-nudge-content",
        children: [/*#__PURE__*/jsx(Body, {
          type: Typography.BODY_LARGE,
          className: clsx('wds-nudge-body'),
          children: title
        }), link && /*#__PURE__*/jsx(Link, {
          href: href,
          type: Typography.LINK_LARGE,
          className: "wds-nudge-link",
          onClick: onClick,
          children: link
        }), action && /*#__PURE__*/jsx(Link, {
          href: action.href,
          target: action.target,
          className: "m-t-1",
          "aria-label": action['aria-label'],
          type: Typography.LINK_LARGE,
          onClick: action.onClick,
          children: action.text
        })]
      }), onDismiss || persistDismissal ? /*#__PURE__*/jsx(IconButton, {
        size: 24,
        priority: "tertiary",
        "aria-label": intl.formatMessage(closeBtnMessages.ariaLabel),
        onClick: handleOnDismiss,
        children: /*#__PURE__*/jsx(Cross, {})
      }) : null]
    })]
  });
};

export { STORAGE_NAME, Nudge as default };
//# sourceMappingURL=Nudge.mjs.map
