"use strict";

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

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

var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));

var _uuid = require("uuid");

var _defaultImg = _interopRequireDefault(require("./defaultImg.png"));

var _coreUtil = require("../../utils/coreUtil");

var _businessUtil = require("../../utils/businessUtil");

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

var _commonUtil = require("../../utils/commonUtil");

require("./index.less");

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 __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var renderCardDefault = function renderCardDefault(src) {
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "card_wrap"
  }, /*#__PURE__*/_react["default"].createElement("img", {
    alt: "",
    src: ((0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc) || _defaultImg["default"]
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "name"
  }, (0, _coreUtil.isPc)() ? src.image.content.pcName : src.image.content.h5Name));
};

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

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

    _this.state = {
      dragId: ''
    };

    _this.moveCard = function (dragNodeId, hoverNodeId) {
      var source = _this.props.source;
      var dragIndex = source.findIndex(function (obj) {
        return obj.id === dragNodeId;
      });
      var hoverIndex = source.findIndex(function (obj) {
        return obj.id === hoverNodeId;
      });
      (0, _commonUtil.dragSource)(source, dragIndex, hoverIndex);

      _this.setState({});
    };

    _this.onDragStart = function (e) {
      _this.setState({
        dragId: e.currentTarget.dataset.nodeid
      });
    };

    _this.onDragEnter = function (e) {
      var dragId = _this.state.dragId;
      var hoverNodeId = e.currentTarget.dataset.nodeid;

      if (dragId === hoverNodeId) {
        return;
      }

      (0, _businessUtil.renderPreview)();

      _this.moveCard(dragId, hoverNodeId);
    };

    _this.onDragEnd = function () {
      _this.setState({
        dragId: ''
      });
    };

    _this.copyItem = function (e, item) {
      e.stopPropagation();
      var source = _this.props.source;
      var index = source.findIndex(function (src) {
        return src.id === item.id;
      });

      var newItem = __assign(__assign({}, item), {
        id: (0, _uuid.v4)()
      });

      source.splice(index, 0, (0, _cloneDeep["default"])(newItem));

      _this.setState({});

      (0, _businessUtil.renderPreview)();
    };

    _this.deleteItem = function (e, item) {
      e.stopPropagation();
      var source = _this.props.source;
      var index = source.findIndex(function (src) {
        return src.id === item.id;
      });
      source.splice(index, 1);

      _this.setState({});

      (0, _businessUtil.renderPreview)();

      _this.props.reRender();
    };

    return _this;
  }

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

    var _a = this.props,
        source = _a.source,
        renderCard = _a.renderCard,
        onClickItem = _a.onClickItem;
    var dragId = this.state.dragId; // const active = selectedNode && selectedNode.id === String(comp.id);

    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "group_list"
    }, source.length > 0 && source.map(function (src) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: "card".concat(src.id),
        className: "group_item",
        "data-nodeid": src.id,
        draggable: "true",
        id: "card".concat(src.id),
        onClick: function onClick() {
          return onClickItem(src);
        },
        onDragEnd: _this.onDragEnd,
        onDragEnter: _this.onDragEnter,
        onDragOver: function onDragOver(e) {
          e.preventDefault();
        },
        onDragStart: _this.onDragStart,
        style: {
          opacity: src.id === dragId ? '0.4' : '1'
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "left"
      }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
        className: "drag-icon",
        color: "#C4C4C4",
        size: "20px",
        type: "icon-drag"
      }), /*#__PURE__*/_react["default"].createElement("span", {
        className: "middle_info ml8"
      }, renderCard(src) || 'image name')), /*#__PURE__*/_react["default"].createElement("div", {
        className: "right"
      }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
        className: "icon_copy",
        color: "#232F46",
        onClick: function onClick(e) {
          return _this.copyItem(e, src);
        },
        size: "20px",
        type: "icon-copy"
      }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
        className: "icon_delete",
        color: "#FF4141",
        onClick: function onClick(e) {
          return _this.deleteItem(e, src);
        },
        size: "20px",
        type: "icon-delete1"
      })));
    }));
  };

  GroupList.defaultProps = {
    source: [],
    onClickItem: function onClickItem() {},
    reRender: function reRender() {},
    renderCard: renderCardDefault
  };
  return GroupList;
}(_react["default"].Component);

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