"use strict";

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

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

require("./index.less");

var _ImageModal = _interopRequireDefault(require("../ImageModal"));

var _Iconfont = _interopRequireDefault(require("../Iconfont"));

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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
      }
    };

    return _extendStatics(d, b);
  };

  return function (d, b) {
    if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");

    _extendStatics(d, b);

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

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

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

  function ImagePicker() {
    var _this = _super !== null && _super.apply(this, arguments) || this;

    _this.state = {
      visible: false
    };

    _this.onChange = function (v) {
      _this.props.onChange(v);
    };

    _this.onModalOk = function (data) {
      // setContents(params => {
      //   const uids = params.map(param => param.contentId);
      //   const newContents = [...params, ...data.filter(el => !uids.includes(el.contentId))];
      //   if (onChange) {
      //     onChange(newContents);
      //   }
      //   return newContents;
      // });
      _this.setState({
        visible: false
      });

      if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
        console.log('---', data);

        _this.props.onChange(data[0]);
      }
    };

    return _this;
  }

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

    var visible = this.state.visible;
    var value = this.props.value;
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "m-image-picker"
    }, value ? /*#__PURE__*/_react["default"].createElement("div", {
      className: "img-wrap",
      onClick: function onClick() {
        _this.setState({
          visible: true
        });
      }
    }, /*#__PURE__*/_react["default"].createElement("img", {
      src: value
    }), /*#__PURE__*/_react["default"].createElement("div", {
      className: "btn-icons-modal",
      onClick: function onClick(e) {
        return e.stopPropagation();
      }
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "btn-edit",
      onClick: function onClick() {
        _this.setState({
          visible: true
        });
      }
    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
      color: "#fff",
      onClick: function onClick() {},
      size: 25,
      type: "icon-setting"
    }), "Edit"), /*#__PURE__*/_react["default"].createElement("span", {
      className: "line"
    }), /*#__PURE__*/_react["default"].createElement("div", {
      className: "btn-del",
      onClick: function onClick() {
        _this.props.onChange('');
      }
    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
      color: "#fff",
      onClick: function onClick() {},
      size: 25,
      type: "icon-delete1"
    }), "Delete"))) : /*#__PURE__*/_react["default"].createElement("div", {
      className: "no-img"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "hint-txt"
    }, "Looks like you don't have any images in your gallery. Choose images to feature on this page."), /*#__PURE__*/_react["default"].createElement("div", {
      className: "pick-btn",
      onClick: function onClick() {
        _this.setState({
          visible: true
        });
      }
    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
      color: "#FFFFFF",
      size: 18,
      type: "icon-add"
    }), /*#__PURE__*/_react["default"].createElement("p", null, "Add Image"))), visible && /*#__PURE__*/_react["default"].createElement(_ImageModal["default"], {
      onCancel: function onCancel() {
        _this.setState({
          visible: false
        });
      },
      onOk: this.onModalOk,
      visible: true
    }));
  };

  ImagePicker.defaultProps = {
    value: '',
    onChange: function onChange() {}
  };
  return ImagePicker;
}(_react["default"].Component);

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