import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/es.array.map.js";
import * as React from 'react';
import { Grid, GridColumn, Header, Paragraph } from '@megafon/ui-core';
import { breakpoints, cnCreate } from '@megafon/ui-helpers';
import convert from 'htmr';
import throttle from 'lodash.throttle';
import throttleTime from "../../constants/throttleTime";
import getCenterConfig, { getLeftConfig } from "./helpers";
import "./BenfitsPictures.css";
export var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
var testIdPrefix = 'BenefitsPictures';
var cn = cnCreate('mfui-9-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 = _slicedToArray(_React$useState, 2),
    currentGutter = _React$useState2[0],
    setCurrentGutter = _React$useState2[1];
  var resizeHandler = React.useCallback(function () {
    if (!isLargeGutter) {
      return;
    }
    if (window.innerWidth < breakpoints.DESKTOP_MIDDLE_START) {
      setCurrentGutter('medium');
    } else {
      setCurrentGutter('large');
    }
  }, [isLargeGutter]);
  var renderText = function renderText(text) {
    if (typeof text === 'string') {
      return /*#__PURE__*/React.createElement(Paragraph, {
        dataAttrs: {
          root: {
            'data-testid': "".concat(testIdPrefix, "-paragraph")
          }
        }
      }, convert(text));
    }
    return text;
  };
  React.useEffect(function () {
    var throttledResizeHandler = throttle(resizeHandler, throttleTime.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(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(GridColumn, _extends({}, align === 'left' ? getLeftConfig(items.length, index) : getCenterConfig(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(Header, {
      className: cn('title'),
      as: "h3",
      dataAttrs: {
        root: {
          'data-testid': "".concat(testIdPrefix, "-title")
        }
      }
    }, convert(title)), !!text && renderText(text))));
  }))));
};
export default BenefitsPictures;