function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
import React from "react";
import uuid from "shortid";
import { reduxForm } from "redux-form";
import { InputField, ReactSelectField, wrapDialog, InfoHelper } from "teselagen-react-components";
import { compose } from "redux";
import { Button, Intent, Classes } from "@blueprintjs/core";
import { flatMap } from "lodash";
import classNames from "classnames";
import withEditorProps from "../../withEditorProps";
import { CheckboxField } from "teselagen-react-components";
import "./style.css";
import tgFormValues from "../../utils/tgFormValues";
var MergeFeaturesDialog = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(MergeFeaturesDialog, _React$Component);
  function MergeFeaturesDialog() {
    return _React$Component.apply(this, arguments) || this;
  }
  var _proto = MergeFeaturesDialog.prototype;
  _proto.render = function render() {
    var _this$props = this.props,
      hideModal = _this$props.hideModal,
      handleSubmit = _this$props.handleSubmit,
      selectedAnnotations = _this$props.selectedAnnotations,
      sequenceData = _this$props.sequenceData,
      selectionLayerUpdate = _this$props.selectionLayerUpdate,
      id1 = _this$props.id1,
      upsertFeature = _this$props.upsertFeature,
      deleteFeature = _this$props.deleteFeature,
      id2 = _this$props.id2,
      change = _this$props.change;
    var features = sequenceData.features;
    var feat1 = features[id1];
    var feat2 = features[id2];
    var _flatMap = flatMap(selectedAnnotations.idStack, function (id) {
        var ann = selectedAnnotations.idMap[id];
        if (ann.annotationTypePlural === "features") {
          return id;
        }
        return [];
      }),
      id1default = _flatMap[0],
      id2default = _flatMap[1];
    return /*#__PURE__*/React.createElement("form", {
      onSubmit: handleSubmit(function (_ref) {
        var id1 = _ref.id1,
          id2 = _ref.id2,
          name = _ref.name,
          preserveFeatures = _ref.preserveFeatures,
          start = _ref.start,
          end = _ref.end;
        if (!preserveFeatures) {
          deleteFeature([id1, id2], {
            batchUndoStart: true
          });
        }
        upsertFeature(_extends({}, feat1, {
          id: uuid(),
          start: start - 1,
          end: end - 1,
          name: name
        }), {
          batchUndoEnd: true
        });
        selectionLayerUpdate({
          start: start - 1,
          end: end - 1
        });
        hideModal();
      }),
      className: classNames(Classes.DIALOG_BODY, "tg-min-width-dialog", "veMergeFeaturesDialog")
    }, /*#__PURE__*/React.createElement(InfoHelper, {
      displayToSide: true
    }, /*#__PURE__*/React.createElement("span", {
      style: {
        fontStyle: "italic",
        fontSize: 11,
        marginTop: -8
      }
    }, "Choose features in the dropdown or shift click directly on the plasmid map")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ReactSelectField, {
      inlineLabel: true,
      required: true,
      defaultValue: id1default,
      enableReinitialize: true,
      name: "id1",
      label: /*#__PURE__*/React.createElement("div", {
        style: {
          display: "flex",
          width: "100%",
          alignItems: "top"
        }
      }, /*#__PURE__*/React.createElement(InfoHelper, {
        popoverProps: {
          position: "top"
        },
        onClick: function onClick() {
          feat1 && change("name", feat1.name);
        },
        disabled: !feat1,
        icon: "small-plus",
        isButton: true
      }, "Use Name"), /*#__PURE__*/React.createElement("div", {
        style: {
          padding: "10px 0px 0px 10px",
          minWidth: 80
        }
      }, "Feature 1:")),
      options: flatMap(features, function (feat) {
        if (feat.id === (feat2 && feat2.id)) return []; //filter out other feature as an option
        return {
          value: feat.id,
          label: feat.name
        };
      })
    }), /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: -8,
        marginBottom: 10,
        display: "flex",
        justifyContent: "center",
        width: " 100%"
      }
    }, /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        var id1Holder = id1;
        change("id1", id2);
        change("id2", id1Holder);
      },
      icon: "swap-vertical"
    }, " ", "Swap", " "), " ", "\xA0", " "), /*#__PURE__*/React.createElement(ReactSelectField, {
      inlineLabel: true,
      required: true,
      defaultValue: id2default,
      enableReinitialize: true,
      name: "id2",
      label: /*#__PURE__*/React.createElement("div", {
        style: {
          display: "flex",
          width: "100%",
          alignItems: "top"
        }
      }, /*#__PURE__*/React.createElement(InfoHelper, {
        onClick: function onClick() {
          feat2 && change("name", feat2.name);
        },
        disabled: !feat2,
        icon: "small-plus",
        isButton: true
      }, "Use Name"), /*#__PURE__*/React.createElement("div", {
        style: {
          padding: "10px 0px 0px 10px",
          minWidth: 80
        }
      }, "Feature 2:")),
      options: flatMap(features, function (feat) {
        if (feat.id === (feat1 && feat1.id)) return []; //filter out other feature as an option
        return {
          value: feat.id,
          label: feat.name
        };
      })
    }), /*#__PURE__*/React.createElement(InputField, {
      autoFocus: true,
      inlineLabel: true,
      enableReinitialize: true,
      defaultValue: feat1 && feat1.name,
      validate: required,
      name: "name",
      label: "New Name:"
    }), /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex"
      }
    }, /*#__PURE__*/React.createElement(InputField, {
      inlineLabel: true,
      disabled: true,
      enableReinitialize: true,
      defaultValue: !feat1 ? "" : feat1.start + 1,
      validate: required,
      name: "start",
      label: "New Start:"
    }), "\xA0 \xA0 \xA0", /*#__PURE__*/React.createElement(InputField, {
      inlineLabel: true,
      disabled: true,
      enableReinitialize: true,
      defaultValue: !feat2 ? "" : feat2.end + 1,
      validate: required,
      name: "end",
      label: "New End:"
    })), /*#__PURE__*/React.createElement(CheckboxField, {
      name: "preserveFeatures",
      defaultValue: false,
      label: "Preserve features (by default they will be removed once merged)"
    }), /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex",
        justifyContent: "flex-end"
      },
      className: "width100"
    }, /*#__PURE__*/React.createElement(Button, {
      type: "submit",
      intent: Intent.PRIMARY
    }, "Create Merged Feature")));
  };
  return MergeFeaturesDialog;
}(React.Component);
function required(val) {
  if (!val) return "Required";
}
export default compose(wrapDialog({
  title: "Merge Features",
  isDraggable: true,
  width: 400
}), withEditorProps, reduxForm({
  form: "MergeFeaturesDialog",
  validate: function validate(_ref2) {
    var id1 = _ref2.id1,
      id2 = _ref2.id2;
    var errors = {};
    if (!id1 || Array.isArray(id1)) {
      errors.id1 = "Please select a feature";
    }
    if (!id2 || Array.isArray(id2)) {
      errors.id2 = "Please select a feature";
    }
    return errors;
  }
}), tgFormValues("id1", "id2"))(MergeFeaturesDialog);