/* index.tsx generated by @compiled/babel-plugin v0.40.0 */
import _extends from "@babel/runtime/helpers/extends";
import "./index.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useMemo } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import Heading from '@atlaskit/heading';
import DownloadIcon from '@atlaskit/icon/core/download';
import VidFullScreenOnIcon from '@atlaskit/icon/core/fullscreen-enter';
import FullscreenExitIcon from '@atlaskit/icon/core/fullscreen-exit';
import ShortcutIcon from '@atlaskit/icon/core/link-external';
import { CloseButton, useModal } from '@atlaskit/modal-dialog';
import { fg } from '@atlaskit/platform-feature-flags';
import Tooltip from '@atlaskit/tooltip';
import { messages } from '../../../../messages';
import { Icon } from '../../../common/Icon';
import { MAX_MODAL_SIZE } from '../../constants';
import LinkInfoButton from './link-info-button';
var containerStyles = null;
var iconSize = '24px';

// EDM-7328: CSS Specificity
// An embed modal icon css for img, span, svg has specificity weight of 0-1-1.
// Specify flex ui icon selector to increase specificity weight to 0-2-1.
var iconCss = null;
var titleCss = null;
var buttonGroupCss = null;
var listItemCSS = null;
var resizeButtonCss = null;
var LinkInfo = function LinkInfo(_ref) {
  var icon = _ref.icon,
    providerName = _ref.providerName,
    onDownloadButtonClick = _ref.onDownloadButtonClick,
    onResizeButtonClick = _ref.onResizeButtonClick,
    onViewButtonClick = _ref.onViewButtonClick,
    size = _ref.size,
    testId = _ref.testId,
    title = _ref.title,
    focusRef = _ref.focusRef;
  var _useModal = useModal(),
    onClose = _useModal.onClose;
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var downloadButton = useMemo(function () {
    return /*#__PURE__*/React.createElement(LinkInfoButton, _extends({
      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
      icon: function icon() {
        return /*#__PURE__*/React.createElement(DownloadIcon, {
          label: "",
          spacing: "spacious",
          color: "currentColor"
        });
      },
      label: formatMessage(messages.download),
      onClick: onDownloadButtonClick,
      testId: "".concat(testId, "-download")
    }, fg('navx-4719-a11y-embed-modal-focus-states') ? {
      focusRef: focusRef
    } : {}));
  }, [onDownloadButtonClick, testId, formatMessage, focusRef]);
  var urlButton = useMemo(function () {
    if (onViewButtonClick) {
      var label = providerName ? formatMessage(messages.viewInProvider, {
        providerName: providerName
      }) : formatMessage(messages.viewOriginal);
      var content = providerName ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.viewIn), " ", providerName) : /*#__PURE__*/React.createElement(FormattedMessage, messages.viewOriginal);
      return /*#__PURE__*/React.createElement(LinkInfoButton, _extends({
        content: content,
        icon: function icon() {
          return /*#__PURE__*/React.createElement(ShortcutIcon, {
            label: "",
            spacing: "spacious",
            color: "currentColor"
          });
        },
        label: label,
        onClick: onViewButtonClick,
        testId: "".concat(testId, "-url"),
        role: 'link'
      }, fg('navx-4719-a11y-embed-modal-focus-states') ? {
        focusRef: !onDownloadButtonClick ? focusRef : undefined
      } : {}));
    }
  }, [onViewButtonClick, providerName, testId, formatMessage, onDownloadButtonClick, focusRef]);
  var sizeButton = useMemo(function () {
    var isFullScreen = size === MAX_MODAL_SIZE;
    var message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
    var _icon = isFullScreen ? /*#__PURE__*/React.createElement(FullscreenExitIcon, {
      label: "",
      spacing: "spacious",
      color: "currentColor"
    }) : /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
      label: "",
      spacing: "spacious",
      color: "currentColor"
    });
    return /*#__PURE__*/React.createElement(LinkInfoButton, {
      content: /*#__PURE__*/React.createElement(FormattedMessage, message),
      icon: function icon() {
        return _icon;
      },
      label: formatMessage(message),
      onClick: onResizeButtonClick,
      testId: "".concat(testId, "-resize")
    });
  }, [onResizeButtonClick, size, testId, formatMessage]);
  return /*#__PURE__*/React.createElement("div", {
    className: ax(["_zulpu2gc _1e0c1txw _19bv1ejb _u5f31ejb _ca0q1ejb _n3tdpxbi _1wpz1fhb _4t3i1tcg"])
  }, icon && /*#__PURE__*/React.createElement("div", {
    "data-testid": "".concat(testId, "-icon"),
    className: ax(["_4t3i1tcg _gire1tcg _yrry1tcg _1bnm1tcg _bna71tcg _1xjx1tcg _17521tcg _1tke1tcg _x9xj1tcg _v5981tcg _z15s1tcg _qci81tcg _15iz1tcg _erub1tcg _c71l1tcg _1q121tcg _2s1x1tcg _1rh41tcg _19l31tcg _1pr21tcg _1u5t1tcg _1bsb1tcg _1xyl1tcg _1h1b1tcg _prfw1tcg _mezj1tcg _e2oo1tcg _w8l51tcg _1ul91tcg _1ekg1tcg _jbhf1tcg _11hh1tcg _1rg21tcg _q7cv1tcg _xwbj1tcg _p12f1tcg _1mj01tcg _1r9c1tcg _1xch1tcg _rtys1tcg _b8nk1tcg _4x201tcg"])
  }, /*#__PURE__*/React.createElement(Icon, icon)), /*#__PURE__*/React.createElement("div", {
    className: ax(["_16jlkb7n _1o9zidpf _i0dlf1ug _1e0c1txw _2lx21bp4 _1bah1h6o _1wpz1fhb"])
  }, /*#__PURE__*/React.createElement(Heading, {
    as: "h2",
    size: "small",
    color: "color.text",
    testId: "".concat(testId, "-title")
  }, title)), /*#__PURE__*/React.createElement("ul", {
    role: "list",
    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _zulp1b66 _qtt8glyw _1e0c1txw _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _1pfhze3t _6rthze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _bozgze3t"])
  }, onDownloadButtonClick && /*#__PURE__*/React.createElement("li", {
    className: ax(["_4cvr1h6o _19pkidpf"])
  }, downloadButton), /*#__PURE__*/React.createElement("li", {
    className: ax(["_4cvr1h6o _19pkidpf"])
  }, urlButton), /*#__PURE__*/React.createElement("li", {
    className: ax(["_4cvr1h6o _19pkidpf", "_1dt6glyw"])
  }, sizeButton), /*#__PURE__*/React.createElement("li", {
    className: ax(["_4cvr1h6o _19pkidpf"])
  }, /*#__PURE__*/React.createElement(Tooltip, {
    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_close),
    hideTooltipOnClick: true,
    tag: "span",
    testId: "".concat(testId, "-close-tooltip")
  }, /*#__PURE__*/React.createElement(CloseButton, {
    onClick: onClose,
    label: formatMessage(messages.preview_close),
    testId: testId
  })))));
};
export default LinkInfo;