import _extends from "@babel/runtime/helpers/extends";
import "core-js/modules/es.array.concat.js";
import "core-js/modules/es.array.map.js";
import "core-js/modules/es.array.slice.js";
import React from 'react';
import { Button, Header } from '@megafon/ui-core';
import { breakpoints, cnCreate, convert } from '@megafon/ui-helpers';
import { setRelAttribute } from "../../../helpers/setRelAttribute";
import "./SidePictureCard.css";
var MAX_ICON_ITEMS_COUNT = 4;
var cn = cnCreate('mfui-side-picture-card');
var SidePictureCard = function SidePictureCard(_ref) {
  var background = _ref.background,
    title = _ref.title,
    image = _ref.image,
    _ref$iconItems = _ref.iconItems,
    iconItems = _ref$iconItems === void 0 ? [] : _ref$iconItems,
    button = _ref.button,
    href = _ref.href,
    target = _ref.target,
    rel = _ref.rel,
    _ref$classes = _ref.classes,
    classes = _ref$classes === void 0 ? {} : _ref$classes,
    dataAttrs = _ref.dataAttrs;
  var _ref2 = button || {},
    buttonTitle = _ref2.title,
    buttonHref = _ref2.href,
    buttonTarget = _ref2.target,
    buttonRel = _ref2.rel,
    onButtonClick = _ref2.onClick;
  var isLink = !!href && !buttonHref;
  var ElementType = isLink ? 'a' : 'div';
  var currentRel = setRelAttribute(rel, target);
  var currentButtonRel = setRelAttribute(buttonRel, buttonTarget);
  var visibleIconItems = iconItems.slice(0, MAX_ICON_ITEMS_COUNT);
  var items = visibleIconItems.map(function (item, i) {
    var icon = item.icon,
      _item$text = item.text,
      text = _item$text === void 0 ? '' : _item$text,
      _item$info = item.info,
      info = _item$info === void 0 ? '' : _item$info;
    return /*#__PURE__*/React.createElement("div", {
      className: cn('item'),
      key: "".concat(text || info, "_").concat(i)
    }, /*#__PURE__*/React.createElement("div", {
      className: cn('item-icon')
    }, icon), /*#__PURE__*/React.createElement("div", {
      className: cn('item-description')
    }, !!text && /*#__PURE__*/React.createElement("div", {
      className: cn('item-text')
    }, convert(text, {})), !!info && /*#__PURE__*/React.createElement("div", {
      className: cn('item-info')
    }, convert(info, {}))));
  });
  return /*#__PURE__*/React.createElement(ElementType, _extends({
    className: cn({
      background: background,
      active: isLink
    }, [classes.root])
  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, {
    href: href,
    target: isLink ? target : undefined,
    rel: isLink ? currentRel : undefined
  }), /*#__PURE__*/React.createElement("div", {
    className: cn('content')
  }, !!title && /*#__PURE__*/React.createElement(Header, {
    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title]),
    dataAttrs: {
      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
    },
    as: "h3"
  }, convert(title, {})), /*#__PURE__*/React.createElement("div", {
    className: cn('items')
  }, items), !!buttonTitle && /*#__PURE__*/React.createElement(Button, {
    className: cn('button', [classes.button]),
    dataAttrs: {
      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
    },
    href: buttonHref,
    target: buttonTarget,
    rel: currentButtonRel,
    onClick: onButtonClick
  }, buttonTitle)), /*#__PURE__*/React.createElement("picture", {
    className: cn('picture')
  }, /*#__PURE__*/React.createElement("source", {
    media: "(min-width: ".concat(breakpoints.DESKTOP_MIDDLE_START, "px)"),
    srcSet: image.srcWide
  }), /*#__PURE__*/React.createElement("img", {
    className: cn('image'),
    src: image.src,
    alt: image.alt || 'image'
  })));
};
export default SidePictureCard;