"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FourColumnRow = exports.ThreeColumnRow = exports.TwoColumnRow = void 0;

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

var _componentHeader = _interopRequireDefault(require("../form-elements/component-header"));

var _componentLabel = _interopRequireDefault(require("../form-elements/component-label"));

var _dustbin = _interopRequireDefault(require("./dustbin"));

var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));

var _UUID = _interopRequireDefault(require("../UUID"));

var _store = _interopRequireDefault(require("../stores/store"));

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const accepts = [_ItemTypes.default.BOX, _ItemTypes.default.CARD];

class MultiColumnRow extends _react.default.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasClicked: false
    };

    _store.default.subscribe(state => this.setState({
      store: state
    }));
  }

  _onClick(item) {
    _store.default.dispatch("create", this.create(item));
  }

  create(item) {
    let cloneChildItem = [];
    let itemData = [];

    const parentId = _UUID.default.uuid();

    item.childItems && item.childItems.map(id => {
      if (!!id) {
        const itemId = _UUID.default.uuid();

        cloneChildItem.push(itemId);
        const dataToClone = this.state.store.data.find(item => {
          return item.id === id;
        });

        if (Object.keys(dataToClone).length > 0) {
          Object.assign(itemData, dataToClone);

          _store.default.dispatch("create", { ...dataToClone,
            id: itemId,
            parentId
          });
        }
      } else {
        cloneChildItem.push(null);
      }
    });
    const elementOptions = { ...item,
      id: parentId,
      childItems: cloneChildItem
    };
    return elementOptions;
  }

  render() {
    const {
      controls,
      data,
      editModeOn,
      getDataById,
      setAsChild,
      removeChild,
      seq,
      className,
      index
    } = this.props;
    const {
      childItems,
      pageBreakBefore
    } = data;
    let baseClasses = "SortableItem rfb-item";

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    if (pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked // onDuplicateClick={() => _onClick(data)}
      ,
      onDuplicateClick: this._onClick.bind(this, data)
    })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
      className: "row"
    }, childItems.map((x, i) => /*#__PURE__*/_react.default.createElement("div", {
      key: `${i}_${x || "_"}`,
      className: className
    }, controls ? controls[i] : /*#__PURE__*/_react.default.createElement(_dustbin.default, {
      style: {
        width: "100%"
      },
      data: data,
      accepts: accepts,
      items: childItems,
      col: i,
      parentIndex: index,
      editModeOn: editModeOn,
      _onDestroy: () => removeChild(data, i),
      getDataById: getDataById,
      setAsChild: setAsChild,
      seq: seq
    }))))));
  }

}

const TwoColumnRow = ({
  data,
  class_name,
  ...rest
}) => {
  const className = class_name || "col-md-6";

  if (!data.childItems) {
    // eslint-disable-next-line no-param-reassign
    data.childItems = [null, null];
    data.isContainer = true;
  }

  return /*#__PURE__*/_react.default.createElement(MultiColumnRow, _extends({}, rest, {
    className: className,
    data: data
  }));
};

exports.TwoColumnRow = TwoColumnRow;

const ThreeColumnRow = ({
  data,
  class_name,
  ...rest
}) => {
  const className = class_name || "col-md-4";

  if (!data.childItems) {
    // eslint-disable-next-line no-param-reassign
    data.childItems = [null, null, null];
    data.isContainer = true;
  }

  return /*#__PURE__*/_react.default.createElement(MultiColumnRow, _extends({}, rest, {
    className: className,
    data: data
  }));
};

exports.ThreeColumnRow = ThreeColumnRow;

const FourColumnRow = ({
  data,
  class_name,
  ...rest
}) => {
  const className = class_name || "col-md-3";

  if (!data.childItems) {
    // eslint-disable-next-line no-param-reassign
    data.childItems = [null, null, null, null];
    data.isContainer = true;
  }

  return /*#__PURE__*/_react.default.createElement(MultiColumnRow, _extends({}, rest, {
    className: className,
    data: data
  }));
};

exports.FourColumnRow = FourColumnRow;