import React from "react";
import { getFeatureToColorMap, getFeatureTypes } from "@teselagen/sequence-utils";
import AddOrEditAnnotationDialog from "../AddOrEditAnnotationDialog";
import { ReactSelectField } from "teselagen-react-components";
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: /*#__PURE__*/React.createElement("div", {
          style: {
            display: "flex",
            alignItems: "center",
            marginRight: 10
          }
        }, /*#__PURE__*/React.createElement("div", {
          style: {
            background: getFeatureToColorMap({
              includeHidden: true
            })[type],
            height: 15,
            width: 15,
            marginRight: 5
          }
        }), type),
        value: type
      };
    }),
    name: "type",
    label: "\u7C7B\u578B"
  });
};
export default AddOrEditAnnotationDialog({
  formName: "AddOrEditFeatureDialog",
  dialogProps: {
    // height: 500,
    width: 400
  },
  getProps: function getProps(props) {
    return {
      upsertAnnotation: props.upsertFeature,
      // renderLocations: true, //tnw enable this eventually for proteins
      renderLocations: !props.sequenceData.isProtein,
      renderTypes: renderTypes({
        readOnly: props.readOnly
      }),
      annotationTypePlural: "features"
    };
  }
});