import { svg, nothing, html } from "lit";
import { POIStyle, resolvePOIStyle } from "../poi-graphic-line/poi-graphic-line.js";
function createCircle({
  x,
  y,
  width,
  height,
  rx,
  stroke
}) {
  return svg`<rect
    x="${x}"
    y="${y}"
    width="${width}"
    height="${height}"
    rx="${rx}"
    stroke="${stroke}"
    fill="none"
  />`;
}
function renderPointerDot({
  lineStyle,
  centerX,
  centerY,
  width,
  vbHeight,
  lineColor,
  outlineColor
}) {
  let innerCircle = svg`<rect
        x="${centerX}"
        y="${centerY}"
        width="4"
        height="4"
        rx="2"
        fill="${lineColor}"
      />`;
  let outerCircle = nothing;
  let filterY = centerY;
  const resolvedLineStyle = resolvePOIStyle(lineStyle);
  if (resolvedLineStyle !== POIStyle.Regular) {
    outerCircle = createCircle({
      x: centerX - 0.5,
      y: centerY - 0.5,
      width: 5,
      height: 5,
      rx: 2.5,
      stroke: outlineColor
    });
    filterY = centerY - 1;
  } else {
    innerCircle = svg`<rect
        x="${centerX + 1}"
        y="${centerY + 1}"
        width="2"
        height="2"
        rx="1"
        fill="${lineColor}"
      />`;
  }
  return html`<svg
    width=${width}
    height="${vbHeight}"
    viewBox="0 0 ${width} ${vbHeight}"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    vector-effect="non-scaling-stroke"
  >
    <g filter="url(#pointerDotFilter)">${innerCircle} ${outerCircle}</g>
    <defs>
      <filter
        id="pointerDotFilter"
        x="${0}"
        y="${filterY}"
        width="${width}"
        height="${width}"
        filterUnits="userSpaceOnUse"
        color-interpolation-filters="sRGB"
      >
        <feFlood flood-opacity="0" result="BackgroundImageFix" />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dy="1" />
        <feGaussianBlur stdDeviation="0.5" />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
        />
        <feBlend
          mode="normal"
          in2="BackgroundImageFix"
          result="pointerDotDropShadow"
        />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="pointerDotDropShadow"
          result="shape"
        />
      </filter>
    </defs>
  </svg>`;
}
export {
  renderPointerDot
};
//# sourceMappingURL=pointerDot.js.map
