"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.sizeTypes = exports.pictureVerticalAlignTypes = exports.pictureOverlayTypes = exports.pictureMaskTypes = exports.pictureBackgroundColorTypes = exports.pictureAlignTypes = exports.elementOrderTypes = exports["default"] = exports.arrowTheme = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
require("core-js/modules/es.array.map.js");
var React = _interopRequireWildcard(require("react"));
var _uiCore = require("@megafon/ui-core");
var _uiHelpers = require("@megafon/ui-helpers");
var _setRelAttribute = require("../../helpers/setRelAttribute");
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 }; }
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */

var Swiper = null;
var SwiperSlide = null;
try {
  // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
  var SwiperAll = require('swiper/react');
  Swiper = SwiperAll.Swiper;
  SwiperSlide = SwiperAll.SwiperSlide;
} catch (e) {
  // eslint-disable-next-line no-console
  console.warn("\n        WARNING: megafon/ui-share is using the latest version of swiper.\n        For more information about server-side rendering\n        please check the Instructions component documentation at:\n        https://ui.megafon.ru/components/instructions\n    ");
}
var pictureAlignTypes = exports.pictureAlignTypes = {
  LEFT: 'left',
  RIGHT: 'right'
};
var pictureVerticalAlignTypes = exports.pictureVerticalAlignTypes = {
  CENTER: 'center',
  TOP: 'top',
  UNSET: 'unset'
};
var pictureMaskTypes = exports.pictureMaskTypes = {
  ANDROID: 'android',
  ANDROID_CROPPED: 'android-cropped',
  IPHONE: 'iphone',
  IPHONE_CROPPED: 'iphone-cropped',
  LAPTOP: 'laptop',
  NONE: 'none'
};
var pictureBackgroundColorTypes = exports.pictureBackgroundColorTypes = {
  SPB_SKY_0: 'spbSky0',
  SPB_SKY_1: 'spbSky1',
  BASE: 'base',
  VIOLET: 'violet',
  TRANSPARENT: 'transparent'
};
var pictureOverlayTypes = exports.pictureOverlayTypes = {
  LOGO_BASE: 'logo-base',
  LOGO_SPB_SKY_0: 'logo-spb-sky-0',
  LOGO_CROPPED_BASE_WITH_OPACITY: 'logo-cropped-base-with-opacity',
  LOGO_CROPPED_SPB_SKY_3: 'logo-cropped-spb-sky-3',
  NONE: 'none'
};
var sizeTypes = exports.sizeTypes = {
  DEFAULT: 'default',
  BIG: 'big'
};
var arrowTheme = exports.arrowTheme = {
  PURPLE: 'purple',
  DARK: 'dark'
};
var elementOrderTypes = exports.elementOrderTypes = {
  DEFAULT: 'default',
  REVERSED: 'reversed'
};
var testIdPrefix = 'Instructions';
var cn = (0, _uiHelpers.cnCreate)('mfui-9-instructions');
var swiperSlideCn = cn('slide');
var Instructions = function Instructions(_ref) {
  var dataAttrs = _ref.dataAttrs,
    rootRef = _ref.rootRef,
    _ref$classes = _ref.classes,
    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
    instructionItem = _ref$classes2.instructionItem,
    desktopInstructionItem = _ref$classes2.desktopInstructionItem,
    mobileInstructionItem = _ref$classes2.mobileInstructionItem,
    activeInstructionItem = _ref$classes2.activeInstructionItem,
    desktopItemTitle = _ref$classes2.desktopItemTitle,
    mobileItemTitle = _ref$classes2.mobileItemTitle,
    instructionItemImg = _ref$classes2.instructionItemImg,
    additionalText = _ref$classes2.additionalText,
    arrowPrev = _ref$classes2.arrowPrev,
    arrowNext = _ref$classes2.arrowNext,
    buttonClass = _ref$classes2.button,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? '' : _ref$title,
    instructionItems = _ref.instructionItems,
    _ref$pictureAlign = _ref.pictureAlign,
    pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
    _ref$pictureVerticalA = _ref.pictureVerticalAlign,
    pictureVerticalAlign = _ref$pictureVerticalA === void 0 ? 'center' : _ref$pictureVerticalA,
    _ref$pictureMask = _ref.pictureMask,
    pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask,
    _ref$pictureBackgroun = _ref.pictureBackgroundColor,
    pictureBackgroundColor = _ref$pictureBackgroun === void 0 ? 'transparent' : _ref$pictureBackgroun,
    _ref$pictureOverlay = _ref.pictureOverlay,
    pictureOverlay = _ref$pictureOverlay === void 0 ? 'none' : _ref$pictureOverlay,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'default' : _ref$size,
    getSwiper = _ref.getSwiper,
    text = _ref.additionalText,
    showArrows = _ref.showArrows,
    _ref$arrowsTheme = _ref.arrowsTheme,
    arrowsTheme = _ref$arrowsTheme === void 0 ? arrowTheme.DARK : _ref$arrowsTheme,
    _ref$elementOrder = _ref.elementOrder,
    elementOrder = _ref$elementOrder === void 0 ? 'default' : _ref$elementOrder,
    showMobileNumeration = _ref.showMobileNumeration,
    button = _ref.button,
    children = _ref.children;
  var _React$useState = React.useState(),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    swiperInstance = _React$useState2[0],
    setSwiperInstance = _React$useState2[1];
  var _React$useState3 = React.useState(0),
    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
    slideIndex = _React$useState4[0],
    setSlideIndex = _React$useState4[1];
  var showButton = button === null || button === void 0 ? void 0 : button.title;
  var isMobileReversed = elementOrder === 'reversed';
  var getSwiperInstance = React.useCallback(function (swiper) {
    setSwiperInstance(swiper);
    getSwiper && getSwiper(swiper);
  }, [getSwiper]);
  var getActiveCustomClass = React.useCallback(function (articleIndex, activeIndex) {
    if (articleIndex !== activeIndex) {
      return undefined;
    }
    return activeInstructionItem;
  }, [activeInstructionItem]);
  var handleArticleClick = React.useCallback(function (ind) {
    return function () {
      setSlideIndex(ind);
      swiperInstance && swiperInstance.slideTo(ind);
    };
  }, [swiperInstance]);
  var handleSlideChange = React.useCallback(function (_ref2) {
    var activeIndex = _ref2.activeIndex;
    setSlideIndex(activeIndex);
  }, []);
  var handlePrevClick = React.useCallback(function () {
    if (!swiperInstance) {
      return;
    }
    swiperInstance.slidePrev();
  }, [swiperInstance]);
  var handleNextClick = React.useCallback(function () {
    if (!swiperInstance) {
      return;
    }
    swiperInstance.slideNext();
  }, [swiperInstance]);
  var renderVideo = React.useCallback(function (mediaUrl, index) {
    return /*#__PURE__*/React.createElement("video", (0, _extends2["default"])({
      loop: true,
      muted: true,
      autoPlay: true,
      playsInline: true,
      className: cn('swiper-img', {
        video: true
      })
    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, index + 1)), /*#__PURE__*/React.createElement("source", {
      src: mediaUrl,
      type: "video/mp4"
    }));
  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image]);
  var renderMobileDots = React.useCallback(function () {
    return /*#__PURE__*/React.createElement("ul", {
      className: cn('articles-dots', {
        reversed: isMobileReversed
      }),
      "data-testid": "".concat(testIdPrefix, "-articles-dots-mobile")
    }, instructionItems.map(function (_item, i) {
      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
        key: i,
        className: cn('articles-dot', {
          active: slideIndex === i
        }, [getActiveCustomClass(i, slideIndex), instructionItem, mobileInstructionItem]),
        onClick: handleArticleClick(i)
      }));
    }));
  }, [instructionItems, dataAttrs, slideIndex, instructionItem, mobileInstructionItem, getActiveCustomClass, handleArticleClick, isMobileReversed]);
  var renderSlider = React.useCallback(function () {
    if (!Swiper || !SwiperSlide) {
      return /*#__PURE__*/React.createElement(React.Fragment, null);
    }
    return /*#__PURE__*/React.createElement(Swiper, {
      noSwiping: false,
      onSwiper: getSwiperInstance,
      noSwipingClass: swiperSlideCn,
      onSlideChange: handleSlideChange,
      className: cn('swiper')
    }, instructionItems.map(function (_ref3, i) {
      var mediaUrl = _ref3.mediaUrl,
        isVideo = _ref3.isVideo,
        imageAlt = _ref3.imageAlt;
      return /*#__PURE__*/React.createElement(SwiperSlide, {
        className: swiperSlideCn,
        key: i + mediaUrl
      }, isVideo ? renderVideo(mediaUrl, i) : /*#__PURE__*/React.createElement("img", (0, _extends2["default"])({
        alt: imageAlt,
        src: mediaUrl
      }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, i + 1), {
        className: cn('swiper-img', [instructionItemImg])
      })));
    }));
  }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, handleSlideChange]);
  var renderTitle = React.useCallback(function (resolution) {
    return /*#__PURE__*/React.createElement(_uiCore.Header, {
      className: cn('title', {
        resolution: resolution
      }),
      as: "h2"
    }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig));
  }, [title]);
  var renderQrCode = React.useCallback(function () {
    return /*#__PURE__*/React.createElement(React.Fragment, null, instructionItems.map(function (_ref4, i) {
      var qrCode = _ref4.qrCode,
        qrCodeText = _ref4.qrCodeText;
      return slideIndex === i && !!qrCode && /*#__PURE__*/React.createElement(_uiCore.Tile, {
        className: cn('qr-code'),
        radius: "rounded",
        shadowLevel: "default",
        key: qrCode
      }, !!qrCodeText && /*#__PURE__*/React.createElement("div", {
        className: cn('qr-code-text')
      }, qrCodeText), /*#__PURE__*/React.createElement("img", {
        src: qrCode,
        className: cn('qr-code-image'),
        alt: "QR-\u043A\u043E\u0434"
      }));
    }));
  }, [instructionItems, slideIndex]);
  var renderText = React.useCallback(function () {
    return /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
      className: cn('text', [additionalText]),
      hasMargin: false
    }, (0, _uiHelpers.convert)(text, _uiHelpers.textConvertConfig));
  }, [text, additionalText]);
  var renderPicture = React.useCallback(function () {
    if (pictureMask === pictureMaskTypes.NONE) {
      return renderSlider();
    }
    return /*#__PURE__*/React.createElement("div", {
      className: cn('img-wrapper'),
      "data-testid": "".concat(testIdPrefix, "-img-wrapper")
    }, /*#__PURE__*/React.createElement("div", {
      className: cn('device-screen')
    }), renderSlider());
  }, [pictureMask, renderSlider]);
  var renderDesktopArticles = React.useCallback(function () {
    return /*#__PURE__*/React.createElement("ul", {
      className: cn('articles-list', {
        'text-after': !!text,
        desktop: true
      }),
      "data-testid": "".concat(testIdPrefix, "-articles-list-desktop")
    }, instructionItems.map(function (_ref5, i) {
      var itemTitle = _ref5.title;
      return /*#__PURE__*/React.createElement("li", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
        className: cn('articles-item', {
          active: slideIndex === i
        }, [getActiveCustomClass(i, slideIndex), instructionItem, desktopInstructionItem]),
        "data-index": i,
        key: i
      }), /*#__PURE__*/React.createElement("button", {
        className: cn('articles-item-button'),
        type: "button",
        onClick: handleArticleClick(i)
      }, /*#__PURE__*/React.createElement("div", {
        className: cn('articles-item-dot')
      }, /*#__PURE__*/React.createElement("span", {
        className: cn('articles-item-dot-number')
      }, i + 1)), /*#__PURE__*/React.createElement("div", {
        className: cn('articles-item-title', [desktopItemTitle])
      }, itemTitle)));
    }));
  }, [desktopInstructionItem, desktopItemTitle, getActiveCustomClass, handleArticleClick, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, instructionItem, instructionItems, slideIndex, text]);
  var renderMobileArticles = React.useCallback(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: cn('articles-list', {
        mobile: true
      }),
      "data-testid": "".concat(testIdPrefix, "-articles-list-mobile")
    }, /*#__PURE__*/React.createElement("div", {
      className: cn('articles-title-block', {
        reversed: isMobileReversed,
        'with-numeration': showMobileNumeration
      })
    }, instructionItems.map(function (_ref6, i) {
      var itemTitle = _ref6.title;
      return slideIndex === i && /*#__PURE__*/React.createElement("div", {
        key: i,
        "data-index": i,
        className: cn('articles-title')
      }, showMobileNumeration && /*#__PURE__*/React.createElement("span", {
        className: cn('articles-num')
      }, i + 1), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, i + 1), {
        className: cn('articles-title-text', [mobileItemTitle])
      }), itemTitle));
    })));
  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, instructionItems, mobileItemTitle, slideIndex, isMobileReversed, showMobileNumeration]);
  var renderArrows = React.useCallback(function () {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_uiCore.NavArrow, {
      dataAttrs: {
        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev
      },
      className: cn('arrow', {
        prev: true
      }, [arrowPrev]),
      theme: arrowsTheme,
      disabled: slideIndex === 0,
      onClick: handlePrevClick
    }), /*#__PURE__*/React.createElement(_uiCore.NavArrow, {
      dataAttrs: {
        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext
      },
      className: cn('arrow', {
        next: true
      }, [arrowNext]),
      view: "next",
      theme: arrowsTheme,
      disabled: slideIndex === instructionItems.length - 1,
      onClick: handleNextClick
    }));
  }, [handlePrevClick, handleNextClick, arrowsTheme, arrowPrev, arrowNext, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext, slideIndex, instructionItems.length]);
  var renderButton = React.useCallback(function () {
    var _ref7 = button || {},
      buttonTitle = _ref7.title,
      type = _ref7.type,
      icon = _ref7.icon,
      href = _ref7.href,
      target = _ref7.target,
      rel = _ref7.rel,
      onClick = _ref7.onClick;
    return /*#__PURE__*/React.createElement(_uiCore.Button, {
      dataAttrs: {
        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
      },
      className: cn('button', [buttonClass]),
      type: type,
      theme: "green",
      icon: icon,
      href: href,
      target: target,
      rel: (0, _setRelAttribute.setRelAttribute)(rel, target),
      onClick: onClick
    }, buttonTitle);
  }, [button, buttonClass, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button]);
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
    className: cn({
      mask: pictureMask,
      reversed: isMobileReversed,
      size: size
    }),
    ref: rootRef
  }), /*#__PURE__*/React.createElement(_uiCore.Grid, {
    hAlign: "center"
  }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
    all: "12"
  }, !!title && renderTitle('mobile'), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
    className: cn('wrapper', {
      'vertical-align': pictureVerticalAlign
    })
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper)), /*#__PURE__*/React.createElement("div", {
    className: cn('picture', {
      align: pictureAlign,
      background: pictureBackgroundColor,
      overlay: pictureOverlay
    }),
    "data-testid": "".concat(testIdPrefix, "-picture")
  }, isMobileReversed && renderMobileArticles(), renderPicture(), !!showArrows && renderArrows(), renderQrCode()), renderMobileDots(), /*#__PURE__*/React.createElement("div", {
    className: cn('articles', {
      align: pictureAlign
    })
  }, !!title && renderTitle('desktop'), !isMobileReversed && renderMobileArticles(), renderDesktopArticles(), text && renderText(), showButton && renderButton(), children)))));
};
var _default = exports["default"] = Instructions;