import { useEffect, useRef } from 'react';
import openLink from '@filerobot/utils/lib/openLink';
import { Success } from '@scaleflex/icons';
import EmbedFeat from './EmbedFeat';
import { VIDEO_FEATURES } from './EmbedVideo.constants';
import Styled from './EmbedVideo.styled';
import StyledVideo from './EmbedFeat/EmbedFeat.styled';
import { useExplorer } from '../../../hooks';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var EmbedVideoContent = function EmbedVideoContent(_ref) {
  var _videoFile$url2;
  var videoFile = _ref.videoFile;
  var _useExplorer = useExplorer(),
    i18n = _useExplorer.i18n,
    info = _useExplorer.info,
    _useExplorer$opts$con = _useExplorer.opts.config,
    config = _useExplorer$opts$con === void 0 ? {} : _useExplorer$opts$con;
  var videoConfigs = config.video;
  var inputRef = useRef();
  var handleInputClicks = function handleInputClicks(inputReff, videoUrl) {
    var _inputReff$current, _inputReff$current2;
    var timer;
    (_inputReff$current = inputReff.current) === null || _inputReff$current === void 0 ? void 0 : _inputReff$current.addEventListener('click', function (event) {
      if (event.detail === 1) {
        timer = setTimeout(function () {
          /// TEMPORARY SOLUTION TILL BE FIXED IN UI KIT
          if (event.target.nodeName === 'svg') return undefined;else openLink(videoUrl);
        }, 200);
      }
    });
    (_inputReff$current2 = inputReff.current) === null || _inputReff$current2 === void 0 ? void 0 : _inputReff$current2.addEventListener('dblclick', function (event) {
      clearTimeout(timer);
      event.target.select();
    });
  };
  useEffect(function () {
    var _videoFile$url;
    handleInputClicks(inputRef, (_videoFile$url = videoFile.url) === null || _videoFile$url === void 0 ? void 0 : _videoFile$url.cdn);
  }, []);
  return /*#__PURE__*/_jsx(Styled.EmbedModalBody, {
    children: /*#__PURE__*/_jsxs(Styled.EmbedSettings, {
      children: [/*#__PURE__*/_jsx(Styled.Notification, {
        message: /*#__PURE__*/_jsx("div", {
          dangerouslySetInnerHTML: {
            __html: i18n('embedModalNotification', {
              link: "<a style=\"text-decoration:underline;\" href=\"".concat(videoConfigs.redirectToVideoSettingsPage, "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(i18n('embedModalBreadCrumbs'), "</a>")
            })
          }
        }),
        status: "info"
      }), /*#__PURE__*/_jsxs(Styled.EmbedFeats, {
        children: [/*#__PURE__*/_jsxs(StyledVideo.TextBlock, {
          children: [/*#__PURE__*/_jsx(StyledVideo.VideoFeatTitle, {
            children: i18n('explorerEmbedModalOriginLinkTitle')
          }), /*#__PURE__*/_jsx(StyledVideo.Input, {
            readOnly: true,
            fullWidth: true,
            copyTextMessage: i18n('mutualizedCopyLink'),
            copySuccessIcon: /*#__PURE__*/_jsx(Success, {
              size: 16
            }),
            ref: inputRef,
            value: (_videoFile$url2 = videoFile.url) === null || _videoFile$url2 === void 0 ? void 0 : _videoFile$url2.cdn
          })]
        }), Object.keys(VIDEO_FEATURES).map(function (videoFeatId) {
          return /*#__PURE__*/_jsx(EmbedFeat, {
            videoFeatId: videoFeatId,
            videoFeat: VIDEO_FEATURES[videoFeatId],
            i18n: i18n,
            info: info,
            video: videoFile,
            videoConfigs: videoConfigs,
            handleInputClicks: handleInputClicks
          }, videoFeatId);
        })]
      })]
    })
  });
};
export default EmbedVideoContent;