import _extends from "@babel/runtime/helpers/extends";
import "core-js/modules/es.symbol.js";
import "core-js/modules/es.symbol.description.js";
import React from 'react';
import { Button, Header } from '@megafon/ui-core';
import { cnCreate, convert, textConvertConfig, titleConvertConfig } from '@megafon/ui-helpers';
import { setRelAttribute } from "../../../helpers/setRelAttribute";
import "./CardOnBackground.css";
var cn = cnCreate('mfui-9-card-on-background');
var CardOnBackground = function CardOnBackground(_ref) {
  var title = _ref.title,
    description = _ref.description,
    imageSrc = _ref.imageSrc,
    _ref$imageAlt = _ref.imageAlt,
    imageAlt = _ref$imageAlt === void 0 ? '' : _ref$imageAlt,
    button = _ref.button,
    extraButton = _ref.extraButton,
    href = _ref.href,
    target = _ref.target,
    rel = _ref.rel,
    headerHeight = _ref.headerHeight,
    headerRef = _ref.headerRef,
    _ref$classes = _ref.classes,
    classes = _ref$classes === void 0 ? {} : _ref$classes,
    dataAttrs = _ref.dataAttrs;
  var showButtons = !!(button === null || button === void 0 ? void 0 : button.title) || !!(extraButton === null || extraButton === void 0 ? void 0 : extraButton.title);
  var isLink = !!href && !showButtons;
  var ElementType = isLink ? 'a' : 'div';
  var currentRel = setRelAttribute(rel, target);
  return /*#__PURE__*/React.createElement(ElementType, _extends({
    className: cn({
      active: isLink
    }, [classes.root])
  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, isLink && {
    href: href,
    target: target,
    rel: currentRel
  }), /*#__PURE__*/React.createElement("div", {
    className: cn('content')
  }, /*#__PURE__*/React.createElement("div", _extends({
    className: cn('header-wrapper')
  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header, {
    style: {
      minHeight: headerHeight
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: cn('header'),
    ref: headerRef
  }, /*#__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",
    align: "center"
  }, convert(title, titleConvertConfig)), !!description && /*#__PURE__*/React.createElement("div", {
    className: cn('description')
  }, convert(description, textConvertConfig)))), /*#__PURE__*/React.createElement("div", {
    className: cn('image-wrapper')
  }, /*#__PURE__*/React.createElement("img", {
    className: cn('image'),
    src: imageSrc,
    alt: imageAlt
  })), showButtons && /*#__PURE__*/React.createElement("div", {
    className: cn('buttons')
  }, !!(button === null || button === void 0 ? void 0 : button.title) && /*#__PURE__*/React.createElement("div", {
    className: cn('button')
  }, /*#__PURE__*/React.createElement(Button, {
    className: classes.button,
    dataAttrs: {
      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
    },
    theme: "green",
    fullWidth: true,
    href: button.href,
    target: button.target,
    rel: setRelAttribute(button.rel, button.target),
    onClick: button.onClick
  }, button.title)), !!(extraButton === null || extraButton === void 0 ? void 0 : extraButton.title) && /*#__PURE__*/React.createElement("div", {
    className: cn('button')
  }, /*#__PURE__*/React.createElement(Button, {
    className: classes.extraButton,
    dataAttrs: {
      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
    },
    theme: "gray",
    fullWidth: true,
    href: extraButton.href,
    target: extraButton.target,
    rel: setRelAttribute(extraButton.rel, extraButton.target),
    onClick: extraButton.onClick
  }, extraButton.title)))));
};
export default CardOnBackground;