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.string.link.js";
import * as React from 'react';
import { Button, Header, ContentArea, TextLink, Grid, GridColumn } from '@megafon/ui-core';
import { breakpoints, cnCreate, filterDataAttrs, convert, titleConvertConfig } from '@megafon/ui-helpers';
import throttle from 'lodash.throttle';
import throttleTime from "../../constants/throttleTime";
import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
import "./VideoBanner.css";
export var testIdPrefix = 'VideoBanner';
var cn = cnCreate('mfui-video-banner');
export var ClassName;
(function (ClassName) {
  ClassName["BUTTON"] = "button";
  ClassName["LINK"] = "link";
})(ClassName || (ClassName = {}));
var typographyConfig = {
  b: {
    component: function component(_ref) {
      var children = _ref.children;
      return /*#__PURE__*/React.createElement(Header, {
        className: cn('value'),
        as: "h3",
        color: "inherit"
      }, children);
    }
  }
};
export var VideoType = {
  YOUTUBE: 'youtube',
  VIDEO: 'video'
};
export var ButtonColor = {
  GREEN: 'green',
  PURPLE: 'purple'
};
export var 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 = _slicedToArray(_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(Grid, {
      className: cn('grid'),
      guttersLeft: "medium"
    }, /*#__PURE__*/React.createElement(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(Header, {
      className: cn('title'),
      as: "h1",
      color: "inherit"
    }, convert(title, titleConvertConfig)), /*#__PURE__*/React.createElement("div", {
      className: cn('text')
    }, /*#__PURE__*/React.createElement(Header, {
      as: "h5",
      color: "inherit",
      className: cn('description')
    }, convert(description, titleConvertConfig)), cost && /*#__PURE__*/React.createElement("div", {
      className: cn('cost')
    }, convert(cost, typographyConfig))), /*#__PURE__*/React.createElement("div", {
      className: cn('btns-wrapper')
    }, buttonTitle && /*#__PURE__*/React.createElement(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(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 < breakpoints.DESKTOP_SMALL_START);
    };
    var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
    resizeHandler();
    window.addEventListener('resize', resizeHandlerThrottled);
    return function () {
      window.removeEventListener('resize', resizeHandlerThrottled);
    };
  }, [setIsMobile]);
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: rootRef
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
    className: cn({
      'bottom-shadow': bottomShadow
    }, [className, classes.root])
  }), /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
    className: cn('wrapper')
  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
    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(breakpoints.DESKTOP_MIDDLE_START, "px)"),
    srcSet: imageDesktopWide
  }), /*#__PURE__*/React.createElement("source", {
    media: "(min-width: ".concat(breakpoints.DESKTOP_SMALL_START, "px)"),
    srcSet: imageDesktop
  }), /*#__PURE__*/React.createElement("source", {
    media: "(min-width: ".concat(breakpoints.MOBILE_BIG_START, "px)"),
    srcSet: imageTablet
  }), /*#__PURE__*/React.createElement("img", {
    className: cn('background-image'),
    src: imageMobile,
    alt: imageAlt
  })))));
};
export default VideoBanner;