"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["default"] = exports.ONLY_LEFT_ALIGN_ITEMS_COUNT = 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 _htmr = _interopRequireDefault(require("htmr"));
var _lodash = _interopRequireDefault(require("lodash.throttle"));
var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
var _helpers = _interopRequireWildcard(require("./helpers"));
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 ONLY_LEFT_ALIGN_ITEMS_COUNT = exports.ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
var testIdPrefix = 'BenefitsPictures';
var cn = (0, _uiHelpers.cnCreate)('mfui-benefits-pictures');
var BenefitsPictures = function BenefitsPictures(_ref) {
  var items = _ref.items,
    _ref$align = _ref.align,
    align = _ref$align === void 0 ? 'left' : _ref$align,
    _ref$textAlign = _ref.textAlign,
    textAlign = _ref$textAlign === void 0 ? 'auto' : _ref$textAlign,
    _ref$imgAlign = _ref.imgAlign,
    imgAlign = _ref$imgAlign === void 0 ? 'auto' : _ref$imgAlign,
    _ref$gridGap = _ref.gridGap,
    gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
    rootRef = _ref.rootRef,
    className = _ref.className,
    _ref$classes = _ref.classes,
    classes = _ref$classes === void 0 ? {} : _ref$classes;
  var isLargeGutter = gridGap === 'large';
  var isGridCenterAlign = align === 'center' && items.length !== ONLY_LEFT_ALIGN_ITEMS_COUNT;
  var _React$useState = React.useState(gridGap),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    currentGutter = _React$useState2[0],
    setCurrentGutter = _React$useState2[1];
  var resizeHandler = React.useCallback(function () {
    if (!isLargeGutter) {
      return;
    }
    if (window.innerWidth < _uiHelpers.breakpoints.DESKTOP_MIDDLE_START) {
      setCurrentGutter('medium');
    } else {
      setCurrentGutter('large');
    }
  }, [isLargeGutter]);
  var renderText = function renderText(text) {
    if (typeof text === 'string') {
      return /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
        dataAttrs: {
          root: {
            'data-testid': "".concat(testIdPrefix, "-paragraph")
          }
        }
      }, (0, _htmr["default"])(text));
    }
    return text;
  };
  React.useEffect(function () {
    var throttledResizeHandler = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
    resizeHandler();
    window.addEventListener('resize', throttledResizeHandler);
    return function () {
      return window.removeEventListener('resize', throttledResizeHandler);
    };
  }, [resizeHandler]);
  return /*#__PURE__*/React.createElement("div", {
    className: cn([className, classes.root]),
    ref: rootRef
  }, /*#__PURE__*/React.createElement("div", {
    className: cn('inner')
  }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
    guttersLeft: currentGutter,
    hAlign: isGridCenterAlign ? 'center' : 'left',
    dataAttrs: {
      container: {
        'data-testid': "".concat(testIdPrefix, "-grid-container")
      }
    }
  }, items.map(function (_ref2, index) {
    var img = _ref2.img,
      title = _ref2.title,
      text = _ref2.text,
      alt = _ref2.alt;
    return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({}, align === 'left' ? (0, _helpers.getLeftConfig)(items.length, index) : (0, _helpers["default"])(items.length, index, gridGap), {
      key: index
    }), /*#__PURE__*/React.createElement("div", {
      className: cn('item', [classes.item]),
      "data-testid": "".concat(testIdPrefix, "-item")
    }, /*#__PURE__*/React.createElement("img", {
      className: cn('img', {
        'h-align': imgAlign === 'auto' ? align : imgAlign
      }),
      src: img,
      alt: alt,
      "data-testid": "".concat(testIdPrefix, "-img")
    }), /*#__PURE__*/React.createElement("div", {
      className: cn('content', {
        'h-align': textAlign === 'auto' ? align : textAlign
      }),
      "data-testid": "".concat(testIdPrefix, "-content")
    }, !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
      className: cn('title'),
      as: "h3",
      dataAttrs: {
        root: {
          'data-testid': "".concat(testIdPrefix, "-title")
        }
      }
    }, (0, _htmr["default"])(title)), !!text && renderText(text))));
  }))));
};
var _default = exports["default"] = BenefitsPictures;