"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.testIdPrefix = exports["default"] = exports.VideoType = exports.TextColor = exports.ClassName = exports.ButtonColor = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
require("core-js/modules/es.symbol.js");
require("core-js/modules/es.symbol.description.js");
require("core-js/modules/es.array.concat.js");
require("core-js/modules/es.string.link.js");
var React = _interopRequireWildcard(require("react"));
var _uiCore = require("@megafon/ui-core");
var _uiHelpers = require("@megafon/ui-helpers");
var _lodash = _interopRequireDefault(require("lodash.throttle"));
var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
var _Breadcrumbs = _interopRequireDefault(require("../Breadcrumbs/Breadcrumbs"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var testIdPrefix = exports.testIdPrefix = 'VideoBanner';
var cn = (0, _uiHelpers.cnCreate)('mfui-video-banner');
var ClassName;
(function (ClassName) {
  ClassName["BUTTON"] = "button";
  ClassName["LINK"] = "link";
})(ClassName || (exports.ClassName = ClassName = {}));
var typographyConfig = {
  b: {
    component: function component(_ref) {
      var children = _ref.children;
      return /*#__PURE__*/React.createElement(_uiCore.Header, {
        className: cn('value'),
        as: "h3",
        color: "inherit"
      }, children);
    }
  }
};
var VideoType = exports.VideoType = {
  YOUTUBE: 'youtube',
  VIDEO: 'video'
};
var ButtonColor = exports.ButtonColor = {
  GREEN: 'green',
  PURPLE: 'purple'
};
var TextColor = exports.TextColor = {
  BLACK: 'black',
  WHITE: 'white'
};
var VideoBanner = function VideoBanner(_ref2) {
  var dataAttrs = _ref2.dataAttrs,
    className = _ref2.className,
    _ref2$classes = _ref2.classes,
    classes = _ref2$classes === void 0 ? {} : _ref2$classes,
    rootRef = _ref2.rootRef,
    videoSrc = _ref2.videoSrc,
    videoType = _ref2.videoType,
    imageMobile = _ref2.imageMobile,
    imageTablet = _ref2.imageTablet,
    _ref2$imageDesktop = _ref2.imageDesktop,
    imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
    _ref2$imageDesktopWid = _ref2.imageDesktopWide,
    imageDesktopWide = _ref2$imageDesktopWid === void 0 ? '' : _ref2$imageDesktopWid,
    imageAlt = _ref2.imageAlt,
    content = _ref2.content,
    _ref2$isMuted = _ref2.isMuted,
    isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
    breadcrumbs = _ref2.breadcrumbs,
    _ref2$videoMobile = _ref2.videoMobile,
    videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile,
    _ref2$hasBreadcrumbsM = _ref2.hasBreadcrumbsMicrodata,
    hasBreadcrumbsMicrodata = _ref2$hasBreadcrumbsM === void 0 ? false : _ref2$hasBreadcrumbsM,
    _ref2$bottomShadow = _ref2.bottomShadow,
    bottomShadow = _ref2$bottomShadow === void 0 ? false : _ref2$bottomShadow;
  var _React$useState = React.useState(true),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    isMobile = _React$useState2[0],
    setIsMobile = _React$useState2[1];
  var isVideoData = !!videoSrc && !!videoType;
  var isRenderVideo = (!isMobile || videoMobile) && isVideoData;
  var renderContent = React.useCallback(function (_ref3) {
    var title = _ref3.title,
      description = _ref3.description,
      buttonTitle = _ref3.buttonTitle,
      buttonHref = _ref3.buttonHref,
      buttonTarget = _ref3.buttonTarget,
      buttonDownload = _ref3.buttonDownload,
      _ref3$buttonColor = _ref3.buttonColor,
      buttonColor = _ref3$buttonColor === void 0 ? ButtonColor.GREEN : _ref3$buttonColor,
      buttonRel = _ref3.buttonRel,
      onButtonClick = _ref3.onButtonClick,
      onLinkClick = _ref3.onLinkClick,
      _ref3$textColor = _ref3.textColor,
      textColor = _ref3$textColor === void 0 ? TextColor.BLACK : _ref3$textColor,
      textColorMobile = _ref3.textColorMobile,
      linkTitle = _ref3.linkTitle,
      linkUrl = _ref3.linkUrl,
      linkTarget = _ref3.linkTarget,
      linkDownload = _ref3.linkDownload,
      linkRel = _ref3.linkRel,
      cost = _ref3.cost;
    return /*#__PURE__*/React.createElement(_uiCore.Grid, {
      className: cn('grid'),
      guttersLeft: "medium"
    }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
      mobile: "12",
      tablet: "7",
      desktop: "7",
      wide: "6"
    }, /*#__PURE__*/React.createElement("div", {
      className: cn('content', {
        'text-color': textColor,
        'text-color-mobile': textColorMobile
      }),
      "data-testid": "".concat(testIdPrefix, "-content")
    }, /*#__PURE__*/React.createElement(_uiCore.Header, {
      className: cn('title'),
      as: "h1",
      color: "inherit"
    }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), /*#__PURE__*/React.createElement("div", {
      className: cn('text')
    }, /*#__PURE__*/React.createElement(_uiCore.Header, {
      as: "h5",
      color: "inherit",
      className: cn('description')
    }, (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig)), cost && /*#__PURE__*/React.createElement("div", {
      className: cn('cost')
    }, (0, _uiHelpers.convert)(cost, typographyConfig))), /*#__PURE__*/React.createElement("div", {
      className: cn('btns-wrapper')
    }, buttonTitle && /*#__PURE__*/React.createElement(_uiCore.Button, {
      dataAttrs: {
        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
      },
      className: cn(ClassName.BUTTON, [classes.button]),
      theme: buttonColor,
      href: buttonHref,
      target: buttonTarget,
      onClick: onButtonClick,
      download: buttonDownload,
      rel: buttonRel
    }, buttonTitle), linkTitle && /*#__PURE__*/React.createElement(_uiCore.TextLink, {
      dataAttrs: {
        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
      },
      className: cn(ClassName.LINK, [classes.link]),
      href: linkUrl,
      download: linkDownload,
      target: linkTarget,
      onClick: onLinkClick,
      rel: linkRel
    }, linkTitle)))));
  }, [classes.button, classes.link, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link]);
  var renderVideo = React.useCallback(function () {
    switch (videoType) {
      case VideoType.YOUTUBE:
        {
          var url = "https://www.youtube.com/embed/".concat(videoSrc, "?");
          var autoplay = '&autoplay=1';
          var mute = "&mute=".concat(isMuted ? 1 : 0);
          var loop = '&loop=1';
          var rel = '&rel=0';
          var controls = '&controls=0';
          var info = '&showinfo=0e';
          var policy = '&iv_load_policy=3';
          var playlist = "&playlist=".concat(videoSrc);
          var src = "".concat(url).concat(autoplay).concat(mute).concat(loop).concat(rel).concat(controls).concat(info).concat(policy).concat(playlist);
          return /*#__PURE__*/React.createElement("iframe", {
            title: "iframe",
            className: cn('video'),
            src: src,
            width: "100%",
            height: "100%",
            frameBorder: "0",
            allow: "autoplay",
            "data-testid": "".concat(testIdPrefix, "-iframe-video")
          });
        }
      case VideoType.VIDEO:
        {
          return /*#__PURE__*/(
            // eslint-disable-next-line jsx-a11y/media-has-caption
            React.createElement("video", {
              className: cn('video', [classes.video]),
              autoPlay: true,
              loop: true,
              muted: isMuted,
              "data-testid": "".concat(testIdPrefix, "-video")
            }, /*#__PURE__*/React.createElement("source", {
              src: videoSrc,
              type: "video/mp4"
            }))
          );
        }
      default:
        {
          return null;
        }
    }
  }, [videoType, videoSrc, isMuted, classes.video]);
  React.useEffect(function () {
    var resizeHandler = function resizeHandler() {
      setIsMobile(window.innerWidth < _uiHelpers.breakpoints.DESKTOP_SMALL_START);
    };
    var resizeHandlerThrottled = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
    resizeHandler();
    window.addEventListener('resize', resizeHandlerThrottled);
    return function () {
      window.removeEventListener('resize', resizeHandlerThrottled);
    };
  }, [setIsMobile]);
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
    ref: rootRef
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
    className: cn({
      'bottom-shadow': bottomShadow
    }, [className, classes.root])
  }), /*#__PURE__*/React.createElement(_uiCore.ContentArea, null, /*#__PURE__*/React.createElement("div", {
    className: cn('wrapper')
  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(_Breadcrumbs["default"], {
    disabledOnMobile: true,
    hasMicrodata: hasBreadcrumbsMicrodata,
    dataAttrs: {
      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,
      link: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbsLink
    },
    className: cn('breadcrumbs'),
    items: breadcrumbs,
    color: content === null || content === void 0 ? void 0 : content.textColor,
    classes: {
      item: classes.breadcrumbs
    }
  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("picture", {
    "data-testid": "".concat(testIdPrefix, "-picture")
  }, /*#__PURE__*/React.createElement("source", {
    media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_MIDDLE_START, "px)"),
    srcSet: imageDesktopWide
  }), /*#__PURE__*/React.createElement("source", {
    media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
    srcSet: imageDesktop
  }), /*#__PURE__*/React.createElement("source", {
    media: "(min-width: ".concat(_uiHelpers.breakpoints.MOBILE_BIG_START, "px)"),
    srcSet: imageTablet
  }), /*#__PURE__*/React.createElement("img", {
    className: cn('background-image'),
    src: imageMobile,
    alt: imageAlt
  })))));
};
var _default = exports["default"] = VideoBanner;