/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./index.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useMemo } from 'react';
import { FormattedMessage, useIntl } from 'react-intl-next';
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 { componentWithFG } from '@atlaskit/platform-feature-flags-react';
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';
const containerStyles = null;
const 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.
const iconCss = null;
const titleCss = null;
const actionCss = null;
const buttonGroupCss = null;
const listItemCSS = null;
const resizeButtonCss = null;
const LinkInfo = ({
  icon,
  providerName,
  onDownloadButtonClick,
  onResizeButtonClick,
  onViewButtonClick,
  size,
  testId,
  title
}) => {
  const {
    onClose
  } = useModal();
  const {
    formatMessage
  } = useIntl();
  const downloadButton = useMemo(() => {
    if (onDownloadButtonClick) {
      return /*#__PURE__*/React.createElement(LinkInfoButton, {
        content: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
        icon: () => /*#__PURE__*/React.createElement(DownloadIcon, {
          label: fg('platform_navx_flex_card_status_dropdown_a11y_fix') ? '' : messages.download.defaultMessage,
          spacing: "spacious",
          color: "currentColor"
        }),
        label: messages.download,
        onClick: onDownloadButtonClick,
        testId: `${testId}-download`
      });
    }
  }, [onDownloadButtonClick, testId]);
  const urlButton = useMemo(() => {
    if (onViewButtonClick) {
      const 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, {
        content: content,
        icon: () => /*#__PURE__*/React.createElement(ShortcutIcon, {
          label: fg('platform_navx_flex_card_status_dropdown_a11y_fix') ? '' : messages.viewOriginal.defaultMessage,
          spacing: "spacious",
          color: "currentColor"
        }),
        label: messages.viewOriginal,
        onClick: onViewButtonClick,
        testId: `${testId}-url`,
        role: 'link',
        "aria-label": messages.viewOriginal
      });
    }
  }, [onViewButtonClick, providerName, testId]);
  const sizeButton = useMemo(() => {
    const isFullScreen = size === MAX_MODAL_SIZE;
    const message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
    const icon = isFullScreen ? /*#__PURE__*/React.createElement(FullscreenExitIcon, {
      label: fg('platform_navx_flex_card_status_dropdown_a11y_fix') ? '' : message.defaultMessage,
      spacing: "spacious",
      color: "currentColor"
    }) : /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
      label: fg('platform_navx_flex_card_status_dropdown_a11y_fix') ? '' : message.defaultMessage,
      spacing: "spacious",
      color: "currentColor"
    });
    return (
      /*#__PURE__*/
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      React.createElement("span", {
        className: "smart-link-resize-button"
      }, /*#__PURE__*/React.createElement(LinkInfoButton, {
        content: /*#__PURE__*/React.createElement(FormattedMessage, message),
        icon: () => icon,
        label: message,
        onClick: onResizeButtonClick,
        testId: `${testId}-resize`
      }))
    );
  }, [onResizeButtonClick, size, testId]);
  return /*#__PURE__*/React.createElement("div", {
    className: ax(["_zulpu2gc _1e0c1txw _19bv1ejb _u5f31ejb _ca0q1ejb _n3tdpxbi _1wpz1fhb _4t3i1tcg"])
  }, icon && /*#__PURE__*/React.createElement("div", {
    "data-testid": `${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: `${testId}-title`
  }, title), /*#__PURE__*/React.createElement("span", {
    tabIndex: 0,
    role: "button",
    "aria-hidden": true
  })), /*#__PURE__*/React.createElement("div", {
    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _zulp1b66 _1e0c1txw _3kllglyw"])
  }, downloadButton, urlButton, sizeButton, /*#__PURE__*/React.createElement(Tooltip, {
    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_close),
    hideTooltipOnClick: true,
    tag: "span",
    testId: `${testId}-close-tooltip`
  }, /*#__PURE__*/React.createElement(CloseButton, {
    onClick: onClose,
    label: formatMessage(messages.preview_close),
    testId: testId
  }))));
};
const LinkInfoNew = ({
  icon,
  providerName,
  onDownloadButtonClick,
  onResizeButtonClick,
  onViewButtonClick,
  size,
  testId,
  title
}) => {
  const {
    onClose
  } = useModal();
  const {
    formatMessage
  } = useIntl();
  const downloadButton = useMemo(() => /*#__PURE__*/React.createElement(LinkInfoButton, {
    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
    icon: () => /*#__PURE__*/React.createElement(DownloadIcon, {
      label: "",
      spacing: "spacious",
      color: "currentColor"
    }),
    label: messages.download,
    onClick: onDownloadButtonClick,
    testId: `${testId}-download`
  }), [onDownloadButtonClick, testId]);
  const urlButton = useMemo(() => {
    if (onViewButtonClick) {
      const 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, {
        content: content,
        icon: () => /*#__PURE__*/React.createElement(ShortcutIcon, {
          label: "",
          spacing: "spacious",
          color: "currentColor"
        }),
        label: messages.viewOriginal,
        onClick: onViewButtonClick,
        testId: `${testId}-url`,
        role: 'link',
        "aria-label": messages.viewOriginal
      });
    }
  }, [onViewButtonClick, providerName, testId]);
  const sizeButton = useMemo(() => {
    const isFullScreen = size === MAX_MODAL_SIZE;
    const message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
    const 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: () => icon,
      label: message,
      onClick: onResizeButtonClick,
      testId: `${testId}-resize`
    });
  }, [onResizeButtonClick, size, testId]);
  return /*#__PURE__*/React.createElement("div", {
    className: ax(["_zulpu2gc _1e0c1txw _19bv1ejb _u5f31ejb _ca0q1ejb _n3tdpxbi _1wpz1fhb _4t3i1tcg"])
  }, icon && /*#__PURE__*/React.createElement("div", {
    "data-testid": `${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: `${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: `${testId}-close-tooltip`
  }, /*#__PURE__*/React.createElement(CloseButton, {
    onClick: onClose,
    label: formatMessage(messages.preview_close),
    testId: testId
  })))));
};
const _default_1 = componentWithFG('platform_navx_sl_a11y_embed_modal', LinkInfoNew, LinkInfo);
export default _default_1;