import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/es.symbol.js";
import "core-js/modules/es.symbol.description.js";
import "core-js/modules/es.array.concat.js";
import * as React from 'react';
import { Header } from '@megafon/ui-core';
import { breakpoints, cnCreate, filterDataAttrs, convert, titleConvertConfig } from '@megafon/ui-helpers';
import "./ImageBanner.css";
export var BackgroundColor = {
  TRANSPARENT: 'transparent',
  GREEN: 'green',
  PURPLE: 'purple',
  SPB_SKY_0: 'spbSky0',
  GRADIENT: 'gradient',
  LIGHT: 'light'
};
export var Radius = {
  CORNERS: 'corners',
  ROUNDED: 'rounded'
};
export var NavTheme = {
  LIGHT: 'light',
  DARK: 'dark'
};
export var 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 = cnCreate('mfui-9-image-banner');
var typographyConfig = {
  b: {
    component: function component(_ref) {
      var children = _ref.children;
      return /*#__PURE__*/React.createElement(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,
    headerTag = _ref2.headerTag,
    _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 = _slicedToArray(_React$useState, 2),
    isMobile = _React$useState2[0],
    setIsMobile = _React$useState2[1];
  React.useEffect(function () {
    var mediaQuery = window.matchMedia("(max-width: ".concat(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(Header, {
    className: cn('title', [classes.title]),
    color: "inherit",
    as: isMobile ? headerLevelMobile : headerLevel,
    tag: headerTag
  }, typeof title === 'string' ? convert(title, titleConvertConfig) : title), !!description && /*#__PURE__*/React.createElement(Header, {
    className: cn('description', [classes.description]),
    as: "h5",
    color: "inherit"
  }, typeof description === 'string' ? convert(description, titleConvertConfig) : description), !!cost && /*#__PURE__*/React.createElement("div", {
    className: cn('cost', [classes.cost])
  }, 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(breakpoints.DESKTOP_SMALL_START, "px)"),
    srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
  }), /*#__PURE__*/React.createElement("img", _extends({}, 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", _extends({}, 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);
};
export default ImageBanner;