import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/es.symbol.js";
import "core-js/modules/es.symbol.description.js";
import "core-js/modules/es.array.concat.js";
import "core-js/modules/es.date.to-json.js";
import "core-js/modules/es.json.stringify.js";
import * as React from 'react';
import { Header, Button, Grid, GridColumn } from '@megafon/ui-core';
import { cnCreate, filterDataAttrs, convert, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
import "./VideoBlock.css";
export var VideoTypes = {
  YOUTUBE: 'youtube',
  RUTUBE: 'rutube',
  VK: 'vk',
  VIDEO: 'video'
};
export var testIdPrefix = 'VideoBlock';
var cn = cnCreate('mfui-9-video-block');
var VideoBlock = function VideoBlock(_ref) {
  var dataAttrs = _ref.dataAttrs,
    className = _ref.className,
    _ref$classes = _ref.classes,
    classes = _ref$classes === void 0 ? {} : _ref$classes,
    rootRef = _ref.rootRef,
    content = _ref.content,
    _ref$videoType = _ref.videoType,
    videoType = _ref$videoType === void 0 ? 'video' : _ref$videoType,
    videoSrc = _ref.videoSrc,
    _ref$isMuted = _ref.isMuted,
    isMuted = _ref$isMuted === void 0 ? true : _ref$isMuted,
    _ref$isAutoplay = _ref.isAutoplay,
    isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay,
    _ref$contentPositionR = _ref.contentPositionRight,
    contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR,
    poster = _ref.poster,
    _ref$playsinline = _ref.playsinline,
    playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline,
    _ref$fixWhiteVideoBac = _ref.fixWhiteVideoBackground,
    fixWhiteVideoBackground = _ref$fixWhiteVideoBac === void 0 ? false : _ref$fixWhiteVideoBac;
  var rutubeRef = React.useRef(null);
  var autoPlayRutube = function autoPlayRutube() {
    var current = rutubeRef.current;
    if (current == null) {
      return;
    }
    window.IntersectionObserver && new window.IntersectionObserver(function (entries, obs) {
      var _a;
      var _entries = _slicedToArray(entries, 1),
        entry = _entries[0];
      if (entry && entry.isIntersecting) {
        (_a = current.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
          type: 'player:play',
          data: {}
        }), '*');
        obs.disconnect();
      }
    }, {
      threshold: 0.5
    }).observe(current);
  };
  React.useEffect(function () {
    if (!isAutoplay || videoType !== VideoTypes.RUTUBE) {
      return;
    }
    autoPlayRutube();
  }, [isAutoplay, videoType]);
  var renderVideo = React.useCallback(function () {
    switch (videoType) {
      case VideoTypes.YOUTUBE:
        {
          var url = "https://www.youtube.com/embed/".concat(videoSrc, "?");
          var autoplay = "&autoplay=".concat(isAutoplay ? 1 : 0);
          var mute = "&mute=".concat(isMuted ? 1 : 0);
          var loop = "&loop=1";
          var rel = "&rel=0";
          var controls = "&controls=".concat(isAutoplay ? 0 : 1);
          var showinfo = "&showinfo=0";
          var ivLoadPolicy = "&iv_load_policy=3";
          var playlist = "&playlist=".concat(videoSrc);
          var playsinlineProp = "&playsinline=".concat(playsinline ? 1 : 0);
          var src = "".concat(url).concat(autoplay).concat(mute).concat(loop).concat(rel).concat(controls).concat(showinfo).concat(ivLoadPolicy).concat(playlist).concat(playsinlineProp);
          return /*#__PURE__*/React.createElement("div", {
            className: cn('youtube')
          }, /*#__PURE__*/React.createElement("iframe", {
            className: cn('iframe'),
            src: src,
            width: "100%",
            height: "100%",
            frameBorder: "0",
            allow: "autoplay",
            title: "iframe",
            allowFullScreen: true,
            "data-testid": "".concat(testIdPrefix, "-iframe-video")
          }));
        }
      case VideoTypes.RUTUBE:
        {
          var _src = "https://rutube.ru/play/embed/".concat(videoSrc, "?");
          return /*#__PURE__*/React.createElement("div", {
            className: cn('rutube')
          }, /*#__PURE__*/React.createElement("iframe", {
            className: cn('iframe'),
            ref: rutubeRef,
            src: _src,
            width: "100%",
            height: "100%",
            frameBorder: "0",
            allow: "autoplay",
            title: "iframe",
            allowFullScreen: true,
            "data-testid": "".concat(testIdPrefix, "-iframe-video")
          }));
        }
      case VideoTypes.VK:
        {
          var _videoSrc$split = videoSrc.split('_'),
            _videoSrc$split2 = _slicedToArray(_videoSrc$split, 2),
            oid = _videoSrc$split2[0],
            id = _videoSrc$split2[1];
          var _url = "https://vk.com/video_ext.php?oid=-".concat(oid, "}&id=").concat(id, "&");
          var _autoplay = "&autoplay=".concat(isAutoplay ? 1 : 0);
          var _src2 = "".concat(_url).concat(_autoplay);
          return /*#__PURE__*/React.createElement("div", {
            className: cn('vk')
          }, /*#__PURE__*/React.createElement("iframe", {
            className: cn('iframe'),
            src: _src2,
            width: "100%",
            height: "100%",
            frameBorder: "0",
            allow: "autoplay",
            title: "iframe",
            allowFullScreen: true,
            "data-testid": "".concat(testIdPrefix, "-iframe-video")
          }));
        }
      case VideoTypes.VIDEO:
        {
          return (
            /*#__PURE__*/
            // eslint-disable-next-line jsx-a11y/media-has-caption
            React.createElement("video", {
              className: cn('video', {
                'fix-background': fixWhiteVideoBackground
              }),
              autoPlay: isAutoplay,
              muted: isMuted,
              controls: !isAutoplay,
              loop: true,
              poster: poster,
              playsInline: playsinline,
              "data-testid": "".concat(testIdPrefix, "-video")
            }, /*#__PURE__*/React.createElement("source", {
              src: videoSrc,
              type: "video/mp4"
            }))
          );
        }
      default:
        {
          return null;
        }
    }
  }, [videoType, videoSrc, isAutoplay, isMuted, poster, playsinline, fixWhiteVideoBackground]);
  var renderContent = React.useCallback(function (_ref2) {
    var title = _ref2.title,
      description = _ref2.description,
      href = _ref2.href,
      buttonDownload = _ref2.buttonDownload,
      buttonTitle = _ref2.buttonTitle,
      buttonRel = _ref2.buttonRel,
      onButtonClick = _ref2.onButtonClick;
    return /*#__PURE__*/React.createElement("div", {
      className: cn('content', {
        'position-right': contentPositionRight
      }),
      "data-testid": "".concat(testIdPrefix, "-content")
    }, /*#__PURE__*/React.createElement(Header, {
      as: "h2",
      className: cn('header')
    }, convert(title, titleConvertConfig)), /*#__PURE__*/React.createElement("div", {
      className: cn('description', [classes.description])
    }, typeof description === 'string' ? convert(description, textConvertConfig) : description), buttonTitle && /*#__PURE__*/React.createElement(Button, {
      dataAttrs: {
        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
      },
      className: cn('button', [classes.button]),
      href: href,
      onClick: onButtonClick,
      download: buttonDownload,
      rel: buttonRel
    }, buttonTitle));
  }, [classes.button, classes.description, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button, contentPositionRight]);
  var renderGridColumns = React.useCallback(function () {
    var columns = [];
    var columnWidth = content ? '7' : '10';
    if (content) {
      columns.push(/*#__PURE__*/React.createElement(GridColumn, {
        all: "5",
        tablet: "12",
        mobile: "12",
        orderTablet: "1",
        orderMobile: "1",
        orderWide: contentPositionRight ? '1' : '0',
        orderDesktop: contentPositionRight ? '1' : '0',
        key: "column-content",
        className: cn('content-column')
      }, renderContent(content)));
    }
    columns.push(/*#__PURE__*/React.createElement(GridColumn, {
      all: columnWidth,
      tablet: "12",
      mobile: "12",
      key: "column-video",
      orderDesktop: contentPositionRight ? '0' : '1',
      orderWide: contentPositionRight ? '0' : '1',
      className: cn('video-column')
    }, renderVideo()));
    return columns;
  }, [renderContent, renderVideo, content, contentPositionRight]);
  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
    className: cn([className, classes.root]),
    ref: rootRef
  }), /*#__PURE__*/React.createElement(Grid, {
    hAlign: "center",
    className: cn('grid')
  }, renderGridColumns()));
};
export default VideoBlock;