"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const mobx_react_1 = require("xmobx/mobx-react");

const styled_1 = require("./styled");

const fixture_1 = require("../fixture");

const state_1 = require("./state");

let SeparateDrop = class SeparateDrop extends react_1.default.Component {
  constructor() {
    super(...arguments);
    this.observableState = new state_1.SeperateDropState();

    this.handleDragOver = () => {
      if (!this.observableState.isDragging) {
        this.props.onDragOver(this.props.value);
      }
    };

    this.handleDragStart = props => {
      this.observableState.setInstance({
        isDragging: true
      });
    };

    this.handleOnDrag = props => {
      this.observableState.setInstance({
        isDragging: true
      });
    };

    this.handleDragEnd = () => {
      this.observableState.setInstance({
        isDragging: false
      });

      if (this.props.onDragEnd) {
        this.props.onDragEnd(this.props.value, this.props.isFilter);
      }
    };
  }

  render() {
    const {
      isDragging
    } = this.observableState;
    const {
      item,
      children
    } = this.props;
    return react_1.default.createElement(styled_1.StyledDraggableWrapper, {
      onMouseDown: this.handleDragStart,
      draggable: true,
      onDragStart: this.handleDragStart,
      onDrag: this.handleOnDrag,
      isDragging: isDragging,
      onDragOver: this.handleDragOver,
      onDragEnd: this.handleDragEnd,
      row: item && fixture_1.variantConfig[item.variant].row,
      column: item && fixture_1.variantConfig[item.variant].column
    }, children);
  }

};
SeparateDrop = tslib_1.__decorate([mobx_react_1.observer], SeparateDrop);
exports.default = SeparateDrop;
exports.SeparateDrop = SeparateDrop; //# sourceMappingURL=SeparateDrop.js.map