import _extends from "@babel/runtime/helpers/extends";
import React, { useCallback, useEffect, useRef, useState } from 'react';
import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
import { fg } from '@atlaskit/platform-feature-flags';
import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
import { SmartLinkSize } from '../../constants';
import useInvokeClientAction from '../../state/hooks/use-invoke-client-action';
import { getPreviewUrlWithTheme } from '../../utils';
import { BaseIconElement } from '../FlexibleCard/components/elements/common';
import withAnalytics from './components/analytics';
import EmbedContent from './components/embed-content';
import withErrorBoundary from './components/error-boundary';
import LinkInfo from './components/link-info';
import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from './constants';
import { EmbedModalSize } from './types';
const toSize = width => width === MAX_MODAL_SIZE ? EmbedModalSize.Large : EmbedModalSize.Small;
const toWidth = size => size === EmbedModalSize.Large ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
const EmbedModal = ({
  invokeDownloadAction,
  fireEvent,
  iframeName,
  isSupportTheming,
  isTrusted = false,
  linkIcon,
  onClose,
  onOpen,
  onResize,
  providerName,
  showModal,
  size = EmbedModalSize.Large,
  src,
  testId = 'smart-embed-preview-modal',
  title,
  invokeViewAction,
  extensionKey,
  isBlanketHidden
}) => {
  const defaultWidth = toWidth(size);
  const [isOpen, setIsOpen] = useState(showModal);
  const [width, setWidth] = useState(defaultWidth);
  const openAt = useRef();
  const invoke = useInvokeClientAction({
    fireEvent
  });
  const handleOnOpenComplete = useCallback(() => {
    openAt.current = Date.now();
    if (onOpen) {
      onOpen({
        size
      });
    }
  }, [onOpen, size]);
  const handleOnClose = useCallback(() => setIsOpen(false), []);
  const handleOnCloseComplete = useCallback(() => {
    if (onClose) {
      const duration = openAt.current ? Date.now() - openAt.current : undefined;
      onClose({
        duration,
        size: toSize(width)
      });
    }
  }, [onClose, width]);
  const handleOnResizeClick = useCallback(() => {
    const newWidth = width === MIN_MODAL_SIZE ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
    setWidth(newWidth);
    if (onResize) {
      onResize({
        size: toSize(newWidth)
      });
    }
    if (invokeViewAction) {
      const visitedDisplay = invokeViewAction.display && invokeViewAction.display !== 'url' ? invokeViewAction.display : null;
      if (visitedDisplay) {
        var _invokeViewAction$id, _invokeViewAction$def;
        fireEvent === null || fireEvent === void 0 ? void 0 : fireEvent('track.smartLink.visited', {
          id: (_invokeViewAction$id = invokeViewAction.id) !== null && _invokeViewAction$id !== void 0 ? _invokeViewAction$id : iframeName,
          display: visitedDisplay,
          definitionId: (_invokeViewAction$def = invokeViewAction.definitionId) !== null && _invokeViewAction$def !== void 0 ? _invokeViewAction$def : null
        });
      }
    }
  }, [fireEvent, iframeName, invokeViewAction, onResize, width]);
  const themeState = useThemeObserver();
  let previewUrl = src;
  const handleOnViewActionClick = useCallback(() => {
    if (invokeViewAction) {
      invoke(invokeViewAction);
      const visitedDisplay = invokeViewAction.display && invokeViewAction.display !== 'url' ? invokeViewAction.display : null;
      if (visitedDisplay) {
        var _invokeViewAction$id2, _invokeViewAction$def2;
        fireEvent === null || fireEvent === void 0 ? void 0 : fireEvent('track.smartLink.visited', {
          id: (_invokeViewAction$id2 = invokeViewAction.id) !== null && _invokeViewAction$id2 !== void 0 ? _invokeViewAction$id2 : iframeName,
          display: visitedDisplay,
          definitionId: (_invokeViewAction$def2 = invokeViewAction.definitionId) !== null && _invokeViewAction$def2 !== void 0 ? _invokeViewAction$def2 : null
        });
      }
    }
  }, [fireEvent, iframeName, invoke, invokeViewAction]);
  const handleOnDownloadActionClick = useCallback(() => {
    invokeDownloadAction && invoke(invokeDownloadAction);
  }, [invokeDownloadAction, invoke]);
  if (previewUrl && isSupportTheming) {
    previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
  }
  const focusRef = useRef(null);
  const hasRestoredFocus = useRef(false);
  useEffect(() => {
    if (!isOpen || !fg('navx-4719-a11y-embed-modal-focus-states')) {
      hasRestoredFocus.current = false;
      return;
    }
    const handleWindowBlur = () => {
      if (hasRestoredFocus.current) return;
      setTimeout(() => {
        var _focusRef$current;
        // document.hasFocus() returns true when focus moved to an
        // iframe on the same page, false when the window itself
        // lost focus (e.g. user switched browser tabs)
        if (!document.hasFocus()) return;
        hasRestoredFocus.current = true;
        (_focusRef$current = focusRef.current) === null || _focusRef$current === void 0 ? void 0 : _focusRef$current.focus();
      }, 0);
    };
    window.addEventListener('blur', handleWindowBlur);
    return () => {
      window.removeEventListener('blur', handleWindowBlur);
    };
  }, [isOpen]);
  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
    height: "100%",
    onClose: handleOnClose,
    onCloseComplete: handleOnCloseComplete,
    onOpenComplete: handleOnOpenComplete,
    testId: testId,
    width: width,
    label: title,
    isBlanketHidden: isBlanketHidden
  }, /*#__PURE__*/React.createElement(LinkInfo, _extends({
    icon: linkIcon && {
      icon: /*#__PURE__*/React.createElement(BaseIconElement, _extends({}, linkIcon, {
        size: SmartLinkSize.Large
      })),
      isFlexibleUi: true
    },
    providerName: providerName,
    onViewButtonClick: invokeViewAction ? handleOnViewActionClick : undefined,
    onDownloadButtonClick: invokeDownloadAction ? handleOnDownloadActionClick : undefined,
    onResizeButtonClick: handleOnResizeClick,
    size: width,
    title: title,
    testId: testId
  }, fg('navx-4719-a11y-embed-modal-focus-states') ? {
    focusRef
  } : {})), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
    isTrusted: isTrusted,
    name: iframeName,
    src: previewUrl,
    testId: testId,
    ariaLabel: title,
    extensionKey: extensionKey
  }))));
};
const _default_1 = withAnalytics(withErrorBoundary(EmbedModal));
export default _default_1;