import AnnotationPositioner from "../AnnotationPositioner";
import AnnotationContainerHolder from "../AnnotationContainerHolder";
import React from "react";
import pureNoFunc from "../../utils/pureNoFunc";
import "./style.css";
import getXStartAndWidthOfRangeWrtRow from "../getXStartAndWidthOfRangeWrtRow";
import { getOverlapsOfPotentiallyCircularRanges } from "@teselagen/range-utils";
function DeletionLayers(props) {
  var charWidth = props.charWidth,
    row = props.row,
    sequenceLength = props.sequenceLength,
    deletionLayerClicked = props.deletionLayerClicked,
    deletionLayerRightClicked = props.deletionLayerRightClicked,
    _props$deletionLayers = props.deletionLayers,
    deletionLayers = _props$deletionLayers === void 0 ? {} : _props$deletionLayers,
    _props$deletionLineHe = props.deletionLineHeight,
    deletionLineHeight = _props$deletionLineHe === void 0 ? 6 : _props$deletionLineHe;
  var deletionLayersToUse = Object.keys(deletionLayers).map(function (key) {
    return deletionLayers[key];
  });
  if (!deletionLayersToUse.length) return null;
  return /*#__PURE__*/React.createElement(AnnotationContainerHolder, {
    className: "veRowViewDeletionLayers",
    containerHeight: deletionLineHeight
  }, deletionLayersToUse.sort(function (deletionLayer) {
    return deletionLayer.inBetweenBps ? 1 : 0;
  }).map(function (deletionLayer, index) {
    var rangeSpansSequence = deletionLayer.start === deletionLayer.end + 1 || deletionLayer.start === 0 && deletionLayer.end === sequenceLength - 1;
    var color = deletionLayer.color;
    var overlaps = getOverlapsOfPotentiallyCircularRanges(deletionLayer, row, sequenceLength);
    return overlaps.map(function (overlap) {
      var _getXStartAndWidthOfR = getXStartAndWidthOfRangeWrtRow({
          range: overlap,
          row: row,
          charWidth: charWidth,
          sequenceLength: sequenceLength
        }),
        xStart = _getXStartAndWidthOfR.xStart,
        width = _getXStartAndWidthOfR.width;
      var deletionStart = overlap.start === deletionLayer.start;
      var deletionEnd = overlap.end === deletionLayer.end;
      return [/*#__PURE__*/React.createElement(AnnotationPositioner, {
        height: deletionLineHeight,
        width: width,
        key: index,
        top: 0
        // className={classnames() }
        ,
        left: xStart + (deletionLayer.inBetweenBps ? charWidth / 1.2 : 0)
      }, /*#__PURE__*/React.createElement("g", {
        className: "clickable",
        onClick: function onClick(event) {
          deletionLayerClicked({
            annotation: deletionLayer,
            event: event
          });
        },
        onContextMenu: function onContextMenu(event) {
          deletionLayerRightClicked({
            annotation: deletionLayer,
            event: event
          });
        }
      }, /*#__PURE__*/React.createElement("rect", {
        fill: color,
        x: "0",
        y: "0",
        height: deletionLineHeight,
        width: width
      }), rangeSpansSequence && deletionStart && /*#__PURE__*/React.createElement("rect", {
        fill: "blue",
        x: "0",
        y: "0",
        height: deletionLineHeight,
        width: 4
      }), rangeSpansSequence && deletionEnd && /*#__PURE__*/React.createElement("rect", {
        fill: "blue",
        x: width - 4,
        y: "0",
        height: deletionLineHeight,
        width: 4
      })))];
    });
  }));
}
export default pureNoFunc(DeletionLayers);