import React from "react";
import AddOrEditAnnotationDialog from "../AddOrEditAnnotationDialog";
import { ReactSelectField, getTagsAndTagOptions, CheckboxField, InfoHelper } from "teselagen-react-components";
import { getFeatureTypes } from "@teselagen/sequence-utils";
import { get } from "lodash";
var renderTypes = function renderTypes(_ref) {
  var readOnly = _ref.readOnly;
  return /*#__PURE__*/React.createElement(ReactSelectField, {
    inlineLabel: true,
    tooltipError: true,
    disabled: readOnly,
    defaultValue: "misc_feature",
    options: getFeatureTypes().map(function (type) {
      return {
        label: type,
        // label: (
        //   <div
        //     style={{
        //       display: "flex",
        //       alignItems: "center",
        //       marginRight: 10
        //     }}
        //   >
        //     <div
        //       style={{
        //         // background: getFeatureToColorMap()[type], add back in if we want colors. import from vesequtils
        //         height: 15,
        //         width: 15,
        //         marginRight: 5
        //       }}
        //     />
        //     {type}
        //   </div>
        // ),
        value: type
      };
    }),
    name: "type",
    label: "\u7C7B\u578B"
  });
};
var renderAdvancedOptions = function renderAdvancedOptions(_ref2) {
  var readOnly = _ref2.readOnly;
  return /*#__PURE__*/React.createElement(CheckboxField, {
    inlineLabel: true,
    tooltipError: true,
    disabled: readOnly,
    name: "overlapsSelf",
    label: /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex",
        alignItems: "center"
      }
    }, "Part Overlaps Self", /*#__PURE__*/React.createElement(InfoHelper, {
      style: {
        paddingLeft: 10,
        paddingTop: 9
      },
      isInline: true,
      content: "If checked, this part will span the entire sequence and wrap back around on itself. (Useful for USER cloning and other instances where the part needs to span the entire sequence and then some)"
    }))
  });
};
var getRenderTags = function getRenderTags(_ref3) {
  var readOnly = _ref3.readOnly,
    editTagsLink = _ref3.editTagsLink,
    tags = _ref3.tags;
  return /*#__PURE__*/React.createElement(ReactSelectField, {
    disabled: readOnly,
    inlineLabel: true,
    rightEl: editTagsLink,
    isTagSelect: true,
    multi: true,
    tooltipError: true,
    options: tags,
    name: "tags",
    label: "Tags"
  });
};
export default AddOrEditAnnotationDialog({
  formName: "AddOrEditPartDialog",
  dialogProps: {
    width: 450
  },
  getProps: function getProps(props) {
    return {
      upsertAnnotation: props.upsertPart,
      advancedDefaultOpen: get(props, "initialValues.overlapsSelf"),
      advancedOptions: props.allowPartsToOverlapSelf ? renderAdvancedOptions({
        readOnly: props.readOnly
      }) : undefined,
      renderTypes: renderTypes({
        readOnly: props.readOnly
      }),
      renderTags: props.allPartTags && getRenderTags({
        readOnly: props.readOnly,
        editTagsLink: props.editTagsLink,
        tags: getTagsAndTagOptions(props.allPartTags)
      }),
      annotationTypePlural: "parts"
    };
  }
});