"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

require("./index.less");

var _AlignSelector = require("../../../../../common/AlignSelector");

var _components = require("../../../../../meta-comp/components");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var __extends = void 0 && (void 0).__extends || function () {
  var _extendStatics = function extendStatics(d, b) {
    _extendStatics = Object.setPrototypeOf || {
      __proto__: []
    } instanceof Array && function (d, b) {
      d.__proto__ = b;
    } || function (d, b) {
      for (var p in b) {
        if (b.hasOwnProperty(p)) d[p] = b[p];
      }
    };

    return _extendStatics(d, b);
  };

  return function (d, b) {
    _extendStatics(d, b);

    function __() {
      this.constructor = d;
    }

    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  };
}();

var ImageTextMobile =
/** @class */
function (_super) {
  __extends(ImageTextMobile, _super);

  function ImageTextMobile() {
    var _this = _super !== null && _super.apply(this, arguments) || this; // state = {
    //   clickedGroup: '',
    // }
    // componentDidMount() {
    //   this.distroy = autorun(() => {
    //     this.setState({
    //       clickedGroup: store.clickedGroup,
    //     });
    //   });
    // }
    // componentWillUnmount() {
    //   this.distroy();
    // }


    _this.calcWidth = function (num) {
      return (100 - (num * 2 - 1)) / num + "%";
    };

    _this.getCardStyle = function (source, i) {
      var data = _this.props.data;
      var cardStyle = {
        width: _this.calcWidth(data.customize.rowNum),
        marginRight: i % data.customize.rowNum == 0 ? '2%' : 0,
        alignItems: _AlignSelector.alignItemMap[data.customize.align]
      };

      if (source.background.bgType == 'color') {
        cardStyle.backgroundColor = source.background.color;
        cardStyle.opacity = source.background.opacity ? source.background.opacity / 100 : 1;
      } else {
        cardStyle.backgroundImage = source.background.image;
        cardStyle.backgroundPosition = 'center';
      }

      return cardStyle;
    };

    return _this;
  }

  ImageTextMobile.prototype.render = function () {
    var _this = this;

    var data = this.props.data; // const { ready } = this.state;

    console.log('----', data);
    var wrapStyle = {
      alignItems: _AlignSelector.alignItemMap[data.customize.align]
    };

    if (data.background.bgType === 'color') {
      wrapStyle.backgroundColor = data.background.color;
      wrapStyle.opacity = data.background.opacity ? data.background.opacity / 100 : 1;
    } else {
      wrapStyle.backgroundImage = data.background.image;
      wrapStyle.backgroundPosition = 'center';
    }

    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "m-image-text-mobile",
      style: wrapStyle
    }, data.headline.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
      className: "headline",
      data: data.headline
    }), data.subtitle.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
      className: "subtitle",
      data: data.subtitle
    }), (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
      className: "group-wrap"
    }, data.groupSource.map(function (source, i) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: source.id,
        className: data.groupSource.length > data.customize.rowNum ? 'one-card card-margin-bottom' : 'one-card',
        style: _this.getCardStyle(source, i)
      }, source.image.open && /*#__PURE__*/_react["default"].createElement("div", {
        className: "card-image-wrap"
      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
        className: "card-image",
        data: source.image,
        maxHeight: 107
      })), source.title.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
        className: "card-title",
        data: source.title
      }), source.text.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
        className: "card-text",
        data: source.text
      }), source.button.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
        className: "card-first-btn",
        data: source.button
      }), source.secondButton.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
        className: "card-second-btn",
        data: source.secondButton
      }));
    })), /*#__PURE__*/_react["default"].createElement("div", {
      className: "btn-wrap"
    }, data.button.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
      className: "first-btn",
      data: data.button
    }), data.secondButton.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
      className: "second-btn",
      data: data.secondButton
    })));
  };

  ImageTextMobile.defaultProps = {
    data: {}
  };
  return ImageTextMobile;
}(_react["default"].Component);

var _default = ImageTextMobile;
exports["default"] = _default;