import React from "react";
import withEditorProps from "../withEditorProps";
import { TgSelect, getKeyedTagsAndTagOptions } from "teselagen-react-components";
import { flatMap } from "lodash";
import { uniqBy } from "lodash";
export var PartTagSearch = withEditorProps(PartToolDropdown);
function PartToolDropdown(_ref) {
  var sequenceData = _ref.sequenceData,
    updateSelectedPartTags = _ref.updateSelectedPartTags,
    selectedPartTags = _ref.selectedPartTags,
    allPartTags = _ref.allPartTags,
    annotationVisibilityShow = _ref.annotationVisibilityShow,
    editTagsLink = _ref.editTagsLink,
    dontAutoOpen = _ref.dontAutoOpen;
  if (!sequenceData) return /*#__PURE__*/React.createElement("div", null, "No Parts Present");
  var keyedTags = getKeyedTagsAndTagOptions(allPartTags);

  // this is what keyedTags looks like:
  // keyedTags = {
  //   '12:4': {label,value,id},
  //   '12:1': {label,value,id},
  //   '44': {label,value,id},
  // }

  var tags = uniqBy(flatMap(sequenceData.parts, function (_ref2) {
    var tags = _ref2.tags;
    return flatMap(tags, function (t) {
      var tag = keyedTags[t];
      if (!tag) return [];
      return tag;
    });
  }), "value");
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: "100%"
    }
  }, /*#__PURE__*/React.createElement("div", null, "\u6309\u6807\u7B7E\u8FC7\u6EE4: "), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex"
    }
  }, /*#__PURE__*/React.createElement(TgSelect, {
    value: selectedPartTags.parts,
    onChange: function onChange() {
      annotationVisibilityShow("parts");
      updateSelectedPartTags.apply(void 0, arguments);
    },
    isTagSelect: true,
    multi: true,
    popoverProps: {
      usePortal: false,
      modifiers: {
        preventOverflow: {
          enabled: false
        },
        hide: {
          enabled: false
        },
        flip: {
          boundariesElement: "viewport"
        }
      }
    },
    options: tags,
    autoOpen: !dontAutoOpen
  }), editTagsLink || null));
}