import { unsafeCSS, LitElement, html, svg } from "lit";
import { property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { customElement } from "../../../decorator.js";
import { shrinkDimensionForStroke } from "../../../svghelpers/stroke-aware.js";
import componentStyle from "./poi-graphic-line.css.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
var POIStyle = /* @__PURE__ */ ((POIStyle2) => {
  POIStyle2["Normal"] = "normal";
  POIStyle2["Enhanced"] = "enhanced";
  POIStyle2["Regular"] = "regular";
  POIStyle2["Selected"] = "selected";
  POIStyle2["Alarm"] = "alarm";
  POIStyle2["Caution"] = "caution";
  POIStyle2["Warning"] = "warning";
  POIStyle2["Route"] = "route";
  return POIStyle2;
})(POIStyle || {});
var POILineType = /* @__PURE__ */ ((POILineType2) => {
  POILineType2["Regular"] = "regular";
  POILineType2["Dashed"] = "dashed";
  return POILineType2;
})(POILineType || {});
const BASE_COLOR_STYLE = {
  lineColor: "var(--obc-poi-line-line-color, var(--overlay-element-active-color))",
  outlineColor: "var(--obc-poi-line-outline-color, var(--element-disabled-color))"
};
const REGULAR_STYLE = {
  ...BASE_COLOR_STYLE,
  width: 6,
  lineWidth: 1,
  outlineWidth: 1,
  shadowAlpha: 0.8,
  dotStart: 2,
  lineEnd: 3,
  filterDimensions: { x: 0.5, y: 0.5, width: 3 }
};
const ACTIVE_STYLE_BASE = {
  width: 8,
  lineWidth: 1.5,
  outlineWidth: 2,
  shadowAlpha: 0.2,
  dotStart: 0,
  lineEnd: 3,
  filterDimensions: { x: 0, y: 0, width: 4 }
};
const DASHED_DEFAULTS = {
  dashArray: "var(--obc-poi-line-current-dash-array, 1 3)",
  dashOffset: 0,
  strokeLinecap: "butt"
};
const ROUTE_STYLE = {
  ...BASE_COLOR_STYLE,
  width: 8,
  lineWidth: 1.5,
  outlineWidth: 2,
  shadowAlpha: 0.2,
  dotStart: 0,
  lineEnd: 3,
  filterDimensions: { x: 0, y: 0, width: 4 }
};
const NEUTRAL_DASHED_STYLE = {
  ...REGULAR_STYLE,
  ...DASHED_DEFAULTS
};
const REGULAR_DASHED_STYLE = {
  ...NEUTRAL_DASHED_STYLE,
  dashOutlineAndShadow: true
};
const SELECTED_DASHED_STYLE = {
  ...REGULAR_STYLE,
  width: 8,
  lineWidth: 1,
  outlineWidth: 2,
  shadowAlpha: ACTIVE_STYLE_BASE.shadowAlpha,
  ...DASHED_DEFAULTS
};
const ROUTE_DASHED_STYLE = {
  ...ROUTE_STYLE,
  lineWidth: 1,
  outlineWidth: 2,
  dashArray: "var(--obc-poi-line-current-dash-array, 4 3)",
  dashOffset: 0,
  strokeLinecap: "butt"
};
const STYLE_CONFIG = {
  [
    "regular"
    /* Regular */
  ]: {
    [
      "regular"
      /* Regular */
    ]: REGULAR_STYLE,
    [
      "dashed"
      /* Dashed */
    ]: REGULAR_DASHED_STYLE
  },
  [
    "selected"
    /* Selected */
  ]: {
    [
      "regular"
      /* Regular */
    ]: {
      ...BASE_COLOR_STYLE,
      ...ACTIVE_STYLE_BASE
    },
    [
      "dashed"
      /* Dashed */
    ]: SELECTED_DASHED_STYLE
  },
  [
    "alarm"
    /* Alarm */
  ]: {
    [
      "regular"
      /* Regular */
    ]: {
      ...BASE_COLOR_STYLE,
      ...ACTIVE_STYLE_BASE
    },
    [
      "dashed"
      /* Dashed */
    ]: REGULAR_DASHED_STYLE
  },
  [
    "caution"
    /* Caution */
  ]: {
    [
      "regular"
      /* Regular */
    ]: {
      ...BASE_COLOR_STYLE,
      ...ACTIVE_STYLE_BASE
    },
    [
      "dashed"
      /* Dashed */
    ]: REGULAR_DASHED_STYLE
  },
  [
    "warning"
    /* Warning */
  ]: {
    [
      "regular"
      /* Regular */
    ]: {
      ...BASE_COLOR_STYLE,
      ...ACTIVE_STYLE_BASE
    },
    [
      "dashed"
      /* Dashed */
    ]: REGULAR_DASHED_STYLE
  },
  [
    "route"
    /* Route */
  ]: {
    [
      "regular"
      /* Regular */
    ]: ROUTE_STYLE,
    [
      "dashed"
      /* Dashed */
    ]: ROUTE_DASHED_STYLE
  }
};
function resolvePOIStyle(style) {
  switch (style) {
    case "enhanced":
    case "selected":
      return "selected";
    case "alarm":
      return "alarm";
    case "caution":
      return "caution";
    case "warning":
      return "warning";
    case "route":
      return "route";
    case "normal":
    case "regular":
    default:
      return "regular";
  }
}
function getPOILineConfig(style, lineType = "regular") {
  const resolvedStyle = resolvePOIStyle(style);
  const resolvedType = lineType === "dashed" ? "dashed" : "regular";
  return STYLE_CONFIG[resolvedStyle][resolvedType];
}
const POI_STYLE_OPTIONS = [
  "regular",
  "selected",
  "alarm",
  "caution",
  "warning",
  "route"
  /* Route */
];
const POI_LINE_TYPE_OPTIONS = [
  "regular",
  "dashed"
  /* Dashed */
];
const POI_VISUAL_VARIANTS = [
  {
    style: "regular",
    type: "regular"
    /* Regular */
  },
  {
    style: "selected",
    type: "regular"
    /* Regular */
  },
  {
    style: "alarm",
    type: "regular"
    /* Regular */
  },
  {
    style: "warning",
    type: "regular"
    /* Regular */
  },
  {
    style: "caution",
    type: "regular"
    /* Regular */
  },
  {
    style: "route",
    type: "regular"
    /* Regular */
  },
  {
    style: "regular",
    type: "dashed"
    /* Dashed */
  },
  {
    style: "selected",
    type: "dashed"
    /* Dashed */
  },
  {
    style: "alarm",
    type: "dashed"
    /* Dashed */
  },
  {
    style: "warning",
    type: "dashed"
    /* Dashed */
  },
  {
    style: "caution",
    type: "dashed"
    /* Dashed */
  },
  {
    style: "route",
    type: "dashed"
    /* Dashed */
  }
];
let ObcPoiGraphicLine = class extends LitElement {
  constructor() {
    super(...arguments);
    this._idPrefix = `poi-graphic-line-${ObcPoiGraphicLine._idCounter++}`;
    this.lineHeight = 96;
    this.lineStart = 1;
    this.lineStyle = "enhanced";
    this.lineType = "regular";
    this.offset = 0;
  }
  render() {
    const style = getPOILineConfig(this.lineStyle, this.lineType);
    return html`
      ${graphicLine({
      style,
      lineHeight: this.lineHeight,
      lineStart: this.lineStart,
      totalHeight: this.lineHeight + this.lineStart,
      offset: this.offset,
      idPrefix: this._idPrefix
    })}
    `;
  }
};
ObcPoiGraphicLine._idCounter = 0;
ObcPoiGraphicLine.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: Number })
], ObcPoiGraphicLine.prototype, "lineHeight", 2);
__decorateClass([
  property({ type: Number })
], ObcPoiGraphicLine.prototype, "lineStart", 2);
__decorateClass([
  property({ type: String, attribute: "line-style", reflect: true })
], ObcPoiGraphicLine.prototype, "lineStyle", 2);
__decorateClass([
  property({ type: String, attribute: "line-type", reflect: true })
], ObcPoiGraphicLine.prototype, "lineType", 2);
__decorateClass([
  property({ type: Number })
], ObcPoiGraphicLine.prototype, "offset", 2);
ObcPoiGraphicLine = __decorateClass([
  customElement("obc-poi-graphic-line")
], ObcPoiGraphicLine);
function graphicLine({
  style,
  lineHeight,
  lineStart = 1,
  totalHeight,
  offset,
  idPrefix
}) {
  const strokeWidth = style.outlineWidth;
  const halfStroke = strokeWidth / 2;
  const safeWidth = shrinkDimensionForStroke(style.width, strokeWidth);
  const xCenter = halfStroke + safeWidth / 2;
  let xStart, xEnd;
  if (offset >= 0) {
    xStart = xCenter;
    xEnd = xStart + offset;
  } else {
    xStart = xCenter - offset;
    xEnd = xCenter;
  }
  const width = style.width + Math.abs(offset);
  const yStart = Math.max(lineStart, halfStroke);
  const lineEnd = Math.min(lineStart + lineHeight, totalHeight - halfStroke);
  const breakStartPoint = Math.min(lineStart + 10, lineEnd);
  const breakEndPoint = Math.min(breakStartPoint + 30, lineEnd);
  const isDashed = Boolean(style.dashArray);
  const dashArray = style.dashArray;
  const dashOffset = style.dashArray ? `${style.dashOffset ?? 0}` : void 0;
  const dashedOutlineAndShadow = isDashed && style.dashOutlineAndShadow === true;
  const outlineDashArray = dashedOutlineAndShadow ? dashArray : void 0;
  const outlineDashOffset = dashedOutlineAndShadow ? dashOffset : void 0;
  const prefixedId = (suffix) => `${idPrefix}-${suffix}`;
  const maskId = prefixedId("mask");
  const filterId = prefixedId("filter");
  const gradientId = prefixedId("linear-gradient");
  const bgFixId = prefixedId("bg-fix");
  const hardAlphaId = prefixedId("hard-alpha");
  const dropShadowId = prefixedId("drop-shadow");
  const shapeId = prefixedId("shape");
  let path;
  if (offset === 0) {
    path = `M${xStart} ${yStart}V ${lineEnd}`;
  } else {
    path = `M${xStart} ${yStart}V ${breakStartPoint} L ${xEnd} ${breakEndPoint}V ${lineEnd}`;
  }
  const topCapPath = `M${xStart} ${yStart}V ${yStart + 1e-3}`;
  return svg`
    <svg
      width="${width}"
      height="${totalHeight}"
      viewBox="0 0 ${width} ${totalHeight}"
      fill="none"
      vector-effect="non-scaling-stroke"
    >
      <mask id="${maskId}" maskUnits="userSpaceOnUse">
        <rect
          x="0"
          y="0"
          width=${width}
          height=${totalHeight}
          fill="url(#${gradientId})"
        />
      </mask>
      <g mask="url(#${maskId})">
        <g filter="url(#${filterId})">
          <path
            d=${path}
            stroke="${style.outlineColor}"
            stroke-width="${style.outlineWidth}"
            stroke-linecap="${dashedOutlineAndShadow ? style.strokeLinecap ?? "butt" : "butt"}"
            stroke-linejoin="round"
            stroke-dasharray=${ifDefined(outlineDashArray)}
            stroke-dashoffset=${ifDefined(outlineDashOffset)}
          />
        </g>
        <path
          d=${path}
          stroke="${style.outlineColor}"
          stroke-width="${style.outlineWidth}"
          stroke-linecap="${dashedOutlineAndShadow ? style.strokeLinecap ?? "butt" : isDashed ? "round" : style.strokeLinecap ?? "round"}"
          stroke-dasharray=${ifDefined(outlineDashArray)}
          stroke-dashoffset=${ifDefined(outlineDashOffset)}
        />
        <path
          d=${path}
          stroke="${style.lineColor}"
          stroke-width="${style.lineWidth}"
          stroke-linecap="${style.strokeLinecap ?? "round"}"
          stroke-dasharray=${ifDefined(dashArray)}
          stroke-dashoffset=${ifDefined(dashOffset)}
        />
        ${isDashed ? svg`<path
              d=${topCapPath}
              stroke="${style.lineColor}"
              stroke-width="${style.lineWidth}"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></path>` : null}
      </g>
      <defs>
        <filter
          id="${filterId}"
          x="-3"
          y="-3"
          width="${width + 6}"
          height="${totalHeight + 6}"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="${bgFixId}" />
          <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="${hardAlphaId}"
          />
          <feOffset dy="0" />
          <feGaussianBlur stdDeviation="0.85" />
          <feComposite in2="${hardAlphaId}" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 ${style.shadowAlpha} 0"
          />
          <feBlend
            mode="normal"
            in2="${bgFixId}"
            result="${dropShadowId}"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="${dropShadowId}"
            result="${shapeId}"
          />
        </filter>
        <linearGradient
          id="${gradientId}"
          gradientTransform="rotate(90)"
        >
          <stop stop-color="white" />
          <stop offset="1" stop-color="black" />
        </linearGradient>
      </defs>
    </svg>
  `;
}
export {
  ObcPoiGraphicLine,
  POILineType,
  POIStyle,
  POI_LINE_TYPE_OPTIONS,
  POI_STYLE_OPTIONS,
  POI_VISUAL_VARIANTS,
  getPOILineConfig,
  graphicLine,
  resolvePOIStyle
};
//# sourceMappingURL=poi-graphic-line.js.map
