import Color from "color";
import classnames from "classnames";
import withHover from "../../helperComponents/withHover";
import getAnnotationNameAndStartStopString from "../../utils/getAnnotationNameAndStartStopString";
import React, { useState } from "react";
import { doesLabelFitInAnnotation } from "../utils";
import { noop } from "lodash";
import getAnnotationClassnames from "../../utils/getAnnotationClassnames";
import { getStripedPattern } from "../../utils/editorUtils";
import { ANNOTATION_LABEL_FONT_WIDTH } from "../constants";
import { partOverhangs } from "../partOverhangs";
import { Tooltip } from "@blueprintjs/core";
function PointedAnnotation(props) {
  var className = props.className,
    widthInBps = props.widthInBps,
    charWidth = props.charWidth,
    height = props.height,
    rangeType = props.rangeType,
    forward = props.forward,
    arrowheadType = props.arrowheadType,
    _props$name = props.name,
    _name = _props$name === void 0 ? "" : _props$name,
    customName = props.customName,
    type = props.type,
    readOnly = props.readOnly,
    isStriped = props.isStriped,
    onMouseLeave = props.onMouseLeave,
    onMouseOver = props.onMouseOver,
    isProtein = props.isProtein,
    id = props.id,
    extraHeight = props.extraHeight,
    flipAnnotation = props.flipAnnotation,
    insertPaths = props.insertPaths,
    insertTicks = props.insertTicks,
    hideName = props.hideName,
    _props$color = props.color,
    color = _props$color === void 0 ? "orange" : _props$color,
    fill = props.fill,
    stroke = props.stroke,
    opacity = props.opacity,
    _props$onClick = props.onClick,
    _onClick = _props$onClick === void 0 ? noop : _props$onClick,
    _props$onDoubleClick = props.onDoubleClick,
    _onDoubleClick = _props$onDoubleClick === void 0 ? noop : _props$onDoubleClick,
    textColor = props.textColor,
    _props$onRightClick = props.onRightClick,
    onRightClick = _props$onRightClick === void 0 ? noop : _props$onRightClick,
    gapsInside = props.gapsInside,
    gapsBefore = props.gapsBefore,
    annotation = props.annotation,
    truncateLabelsThatDoNotFit = props.truncateLabelsThatDoNotFit,
    onlyShowLabelsThatDoNotFit = props.onlyShowLabelsThatDoNotFit;
  var name = customName || _name;
  var pointiness = props.pointiness || 4;
  var arrowPointiness = props.arrowPointiness || 1;
  var _useState = useState(false),
    isOpen = _useState[0],
    setOpen = _useState[1];
  var _useState2 = useState(false),
    isOpen2 = _useState2[0],
    setOpen2 = _useState2[1];
  if (arrowheadType === "NONE") {
    pointiness = 0;
    arrowPointiness = 0;
  }
  var _rangeType = annotation.rangeTypeOverride || rangeType;
  var classNames = getAnnotationClassnames(annotation, {
    isProtein: isProtein,
    type: type,
    viewName: "RowView"
  });
  var partOverhangStart;
  var partOverhangEnd;
  partOverhangs.forEach(function (h) {
    var overhangBps = props[h];
    if (overhangBps) {
      if (h.includes("fivePrime")) {
        partOverhangStart = overhangBps;
        if (h.includes("Underhang")) {
          partOverhangStart += " Underhang";
        } else if (h.includes("Overhang")) {
          partOverhangStart += " Overhang";
        }
      } else {
        partOverhangEnd = overhangBps;
        if (h.includes("Underhang")) {
          partOverhangEnd += " Underhang";
        } else if (h.includes("Overhang")) {
          partOverhangEnd += " Overhang";
        }
      }
    }
  });
  var width = (widthInBps + gapsInside) * charWidth;
  var charWN = charWidth; //charWN is normalized
  if (charWidth < 15) {
    //allow the arrow width to adapt
    if (width > 15) {
      charWN = 15; //tnr: replace 15 here with a non-hardcoded number..
    } else {
      charWN = width;
    }
  }
  charWN = arrowPointiness * charWN;
  var widthMinusOne = width - charWN;
  var path;
  var hasAPoint = false;
  var endLine = annotation.overlapsSelf ? "L 0," + height / 2 + "\n  L -10," + height / 2 + "\n  L 0," + height / 2 + " " : "";
  var bottomLine = (insertTicks || "") + " L 0," + height;
  var startLines = "M 0,0\n  " + (insertPaths || "");
  var arrowLine = annotation.overlapsSelf ? "L " + (width + 10) + "," + height / 2 + "\n  L " + width + "," + height / 2 + " " : "";

  // starting from the top left of the annotation
  if (_rangeType === "middle") {
    //draw a rectangle
    path = "\n        " + startLines + "\n        L " + (width - pointiness / 2) + ",0\n        Q " + (width + pointiness / 2) + "," + height / 2 + " " + (width - pointiness / 2) + "," + height + "\n        " + bottomLine + "\n        Q " + pointiness + "," + height / 2 + " " + 0 + "," + 0 + "\n        z";
  } else if (_rangeType === "start") {
    path = "\n        " + startLines + "\n        L " + (width - pointiness / 2) + ",0\n\n        Q " + (width + pointiness / 2) + "," + height / 2 + " " + (width - pointiness / 2) + "," + height + "\n\n        " + bottomLine + "\n        " + endLine + "\n        z";
  } else if (_rangeType === "beginningAndEnd") {
    hasAPoint = true;
    path = "\n        " + startLines + "\n        L " + widthMinusOne + ",0\n        L " + width + "," + height / 2 + "\n        " + arrowLine + "\n        L " + widthMinusOne + "," + height + "\n        " + bottomLine + "\n        " + endLine + "\n        z";
  } else {
    hasAPoint = true;
    path = "\n      " + startLines + "\n      L " + widthMinusOne + ",0\n      L " + width + "," + height / 2 + "\n      " + arrowLine + "\n      L " + widthMinusOne + "," + height + "\n      " + bottomLine + "\n      Q " + pointiness + "," + height / 2 + " " + 0 + "," + 0 + "\n      z";
  }
  var nameToDisplay = name;
  var textOffset = width / 2 - name.length * 5 / 2 - (hasAPoint ? pointiness / 2 * (forward ? 1 : -1) : 0);
  if (!doesLabelFitInAnnotation(name, {
    width: width
  }, charWidth) || !onlyShowLabelsThatDoNotFit && ["parts", "features"].includes(annotation.annotationTypePlural)) {
    if (truncateLabelsThatDoNotFit) {
      var fractionToDisplay = width / (name.length * ANNOTATION_LABEL_FONT_WIDTH);
      var numLetters = Math.floor(fractionToDisplay * name.length);
      nameToDisplay = name.slice(0, numLetters);
      if (nameToDisplay.length > 3) {
        if (nameToDisplay.length !== name.length) {
          nameToDisplay += "..";
        }
        textOffset = width / 2 - nameToDisplay.length * 5 / 2 - (hasAPoint ? pointiness / 2 * (forward ? 1 : -1) : 0);
      } else {
        textOffset = 0;
        nameToDisplay = "";
      }
    } else {
      textOffset = 0;
      nameToDisplay = "";
    }
  }
  var _textColor = textColor;
  if (!textColor) {
    try {
      _textColor = Color(color).isDark() ? "white" : "black";
    } catch (error) {
      _textColor = "white";
    }
  }
  return /*#__PURE__*/React.createElement("g", {
    onMouseLeave: onMouseLeave,
    onMouseOver: onMouseOver,
    className: " clickable " + className + " " + classNames + " " + (forward ? "ann-forward" : "ann-reverse"),
    "data-id": id,
    onClick: function onClick(event) {
      _onClick({
        annotation: annotation,
        event: event,
        gapsBefore: gapsBefore,
        gapsInside: gapsInside
      });
    },
    onDoubleClick: function onDoubleClick(event) {
      _onDoubleClick && _onDoubleClick({
        annotation: annotation,
        event: event,
        gapsBefore: gapsBefore,
        gapsInside: gapsInside
      });
    },
    onContextMenu: function onContextMenu(event) {
      onRightClick({
        annotation: annotation,
        event: event,
        gapsBefore: gapsBefore,
        gapsInside: gapsInside
      });
    }
  }, !(isOpen || isOpen2) && /*#__PURE__*/React.createElement("title", null, getAnnotationNameAndStartStopString(annotation, {
    isProtein: isProtein,
    readOnly: readOnly
  })), isStriped && getStripedPattern({
    color: color
  }), /*#__PURE__*/React.createElement("path", {
    strokeWidth: "1",
    stroke: stroke || "black",
    opacity: opacity,
    fill: isStriped ? "url(#diagonalHatch)" : fill || color,
    transform: forward ? null : "translate(" + width + ("," + (flipAnnotation ? -extraHeight + 10 : 0) + ") scale(-1," + (flipAnnotation ? "-" : "") + "1) "),
    d: path
  }), partOverhangStart && (rangeType === (forward ? "start" : "end") || rangeType === "beginningAndEnd") && /*#__PURE__*/React.createElement(Tooltip, {
    onInteraction: function onInteraction(isOpen) {
      setOpen(isOpen);
    },
    isOpen: isOpen,
    wrapperTagName: "g",
    targetTagName: "g",
    content: partOverhangStart
  }, /*#__PURE__*/React.createElement("circle", {
    className: "partWithOverhangsIndicator",
    style: {
      fillOpacity: 1
    },
    fill: "#ac68cc",
    cx: (forward ? -7 : 0) + 15,
    cy: 7,
    r: 4
  })), partOverhangEnd && (rangeType === (forward ? "end" : "start") || rangeType === "beginningAndEnd") && /*#__PURE__*/React.createElement(Tooltip, {
    onInteraction: function onInteraction(isOpen) {
      setOpen2(isOpen);
    },
    isOpen: isOpen2,
    wrapperTagName: "g",
    targetTagName: "g",
    content: partOverhangEnd
  }, /*#__PURE__*/React.createElement("circle", {
    className: "partWithOverhangsIndicator",
    style: {
      fillOpacity: 1
    },
    fill: "#ac68cc",
    cx: (forward ? -7 : 0) + width - 10,
    cy: 7,
    r: 4
  })), !hideName && nameToDisplay && /*#__PURE__*/React.createElement("text", {
    className: classnames("veLabelText ve-monospace-font", annotation.labelClassName),
    style: {
      fontSize: ".9em",
      fill: _textColor
    },
    transform: "translate(" + textOffset + "," + (height - 2) + ")"
  }, nameToDisplay));
}
export default withHover(PointedAnnotation);

//  {/* <Tooltip
//               wrapperTagName="g"
//               targetTagName="g"
//               content={"asdfasdfasdfasfdp"}
//             >
//               <rect
//                 style={{ fillOpacity: 1 }}
//                 stroke="#ac68cc"
//                 fill="none"
//                 x={-10}
//                 width={10}
//                 height={5}
//               ></rect>
//             </Tooltip>
//             <Tooltip
//               wrapperTagName="g"
//               targetTagName="g"
//               content={"asdfasdfasdfasfdp"}
//             >
//               <rect
//                 style={{ fillOpacity: 1 }}
//                 stroke="#ac68cc"
//                 fill="none"
//                 x={ width + 2 }
//                 y={7}
//                 width={10}
//                 height={5}
//               ></rect>
//             </Tooltip> */}