"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.Radius = exports.NavTheme = exports.ImageVerticalAlign = exports.BackgroundColor = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
require("core-js/modules/es.symbol.js");
require("core-js/modules/es.symbol.description.js");
require("core-js/modules/es.array.concat.js");
var React = _interopRequireWildcard(require("react"));
var _uiCore = require("@megafon/ui-core");
var _uiHelpers = require("@megafon/ui-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 BackgroundColor = exports.BackgroundColor = {
  TRANSPARENT: 'transparent',
  GREEN: 'green',
  PURPLE: 'purple',
  SPB_SKY_0: 'spbSky0',
  GRADIENT: 'gradient',
  LIGHT: 'light'
};
var Radius = exports.Radius = {
  CORNERS: 'corners',
  ROUNDED: 'rounded'
};
var NavTheme = exports.NavTheme = {
  LIGHT: 'light',
  DARK: 'dark'
};
var ImageVerticalAlign = exports.ImageVerticalAlign = {
  TOP: 'top',
  CENTER: 'center',
  BOTTOM: 'bottom'
};
var getTheme = function getTheme(backgrounColor) {
  switch (backgrounColor) {
    case BackgroundColor.GREEN:
    case BackgroundColor.PURPLE:
      return NavTheme.LIGHT;
    default:
      return NavTheme.DARK;
  }
};
var cn = (0, _uiHelpers.cnCreate)('mfui-image-banner');
var typographyConfig = {
  b: {
    component: function component(_ref) {
      var children = _ref.children;
      return /*#__PURE__*/React.createElement(_uiCore.Header, {
        className: cn('value'),
        as: "h3",
        color: "inherit"
      }, children);
    }
  }
};
var ImageBanner = function ImageBanner(_ref2) {
  var dataAttrs = _ref2.dataAttrs,
    className = _ref2.className,
    _ref2$classes = _ref2.classes,
    classes = _ref2$classes === void 0 ? {} : _ref2$classes,
    rootRef = _ref2.rootRef,
    _ref2$imageMobile = _ref2.imageMobile,
    imageMobile = _ref2$imageMobile === void 0 ? '' : _ref2$imageMobile,
    _ref2$imageMobile2x = _ref2.imageMobile2x,
    imageMobile2x = _ref2$imageMobile2x === void 0 ? '' : _ref2$imageMobile2x,
    _ref2$imageDesktop = _ref2.imageDesktop,
    imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
    _ref2$imageDesktop2x = _ref2.imageDesktop2x,
    imageDesktop2x = _ref2$imageDesktop2x === void 0 ? '' : _ref2$imageDesktop2x,
    _ref2$imageAlt = _ref2.imageAlt,
    imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
    _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
    imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
    _ref2$fetchPriority = _ref2.fetchPriority,
    fetchPriority = _ref2$fetchPriority === void 0 ? 'auto' : _ref2$fetchPriority,
    title = _ref2.title,
    description = _ref2.description,
    cost = _ref2.cost,
    _ref2$headerLevelMobi = _ref2.headerLevelMobile,
    headerLevelMobile = _ref2$headerLevelMobi === void 0 ? 'h1' : _ref2$headerLevelMobi,
    _ref2$headerLevel = _ref2.headerLevel,
    headerLevel = _ref2$headerLevel === void 0 ? 'h1' : _ref2$headerLevel,
    _ref2$backgroundColor = _ref2.backgroundColor,
    backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
    _ref2$radius = _ref2.radius,
    radius = _ref2$radius === void 0 ? Radius.CORNERS : _ref2$radius,
    autoHeight = _ref2.autoHeight,
    isImageFullWidth = _ref2.isImageFullWidth,
    badges = _ref2.badges,
    adBlock = _ref2.adBlock,
    _ref2$hasMarginTop = _ref2.hasMarginTop,
    hasMarginTop = _ref2$hasMarginTop === void 0 ? false : _ref2$hasMarginTop,
    _ref2$fullHeightOnMob = _ref2.fullHeightOnMobile,
    fullHeightOnMobile = _ref2$fullHeightOnMob === void 0 ? false : _ref2$fullHeightOnMob,
    _ref2$children = _ref2.children,
    children = _ref2$children === void 0 ? [] : _ref2$children;
  var _React$useState = React.useState(false),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    isMobile = _React$useState2[0],
    setIsMobile = _React$useState2[1];
  React.useEffect(function () {
    var mediaQuery = window.matchMedia("(max-width: ".concat(_uiHelpers.breakpoints.MOBILE_MIDDLE_END, "px)"));
    var handleMediaChange = function handleMediaChange(_ref3) {
      var matches = _ref3.matches;
      setIsMobile(matches);
    };
    setIsMobile(mediaQuery.matches);
    mediaQuery.addEventListener('change', handleMediaChange);
    return function () {
      mediaQuery.removeEventListener('change', handleMediaChange);
    };
  }, []);
  var navTheme = getTheme(backgroundColor);
  var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
  var renderBadges = !!badges && /*#__PURE__*/React.createElement("div", {
    className: cn('badges', [classes.badges])
  }, badges);
  var renderAdBlock = !!adBlock && /*#__PURE__*/React.createElement("div", {
    className: cn('ad-block', [classes.adBlock])
  }, adBlock);
  var renderContent = /*#__PURE__*/React.createElement("div", {
    className: cn('content')
  }, /*#__PURE__*/React.createElement("div", {
    className: cn('badges-container', [classes.badgesContainer])
  }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
    className: cn('title', [classes.title]),
    color: "inherit",
    as: isMobile ? headerLevelMobile : headerLevel
  }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!description && /*#__PURE__*/React.createElement(_uiCore.Header, {
    className: cn('description', [classes.description]),
    as: "h5",
    color: "inherit"
  }, typeof description === 'string' ? (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig) : description), !!cost && /*#__PURE__*/React.createElement("div", {
    className: cn('cost', [classes.cost])
  }, (0, _uiHelpers.convert)(cost, typographyConfig)), !!children && !!React.Children.count(children) && /*#__PURE__*/React.createElement("div", {
    className: cn('children', [classes.children])
  }, children));
  var renderImage = /*#__PURE__*/React.createElement("picture", {
    className: cn('picture', {
      'v-align': imageVerticalAlign
    })
  }, /*#__PURE__*/React.createElement("source", {
    className: classes.imageSource,
    media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
    srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
  }), /*#__PURE__*/React.createElement("img", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
    className: cn('image', [classes.image]),
    src: imageMobile || imageMobile2x,
    srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
    alt: imageAlt,
    fetchPriority: fetchPriority
  })));
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
    className: cn({
      'background-color': backgroundColor,
      'text-color': navTheme,
      'has-image': hasImage,
      'auto-height': autoHeight,
      'full-width': isImageFullWidth,
      'margin-top': hasMarginTop,
      'full-height-on-mobile': fullHeightOnMobile,
      radius: radius
    }, [className, classes.root]),
    ref: rootRef
  }), renderContent, hasImage && renderImage);
};
var _default = exports["default"] = ImageBanner;