import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property } from "lit/decorators.js";
import componentStyle from "./poi-line.css.js";
import { POIStyle, POILineType, getPOILineConfig } from "../poi-graphic-line/poi-graphic-line.js";
import { renderPointerDot } from "./pointerDot.js";
import { customElement } from "../../../decorator.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;
};
let ObcPoiLine = class extends LitElement {
  constructor() {
    super(...arguments);
    this.height = 96;
    this.poiStyle = POIStyle.Normal;
    this.lineType = POILineType.Regular;
    this.offset = 0;
    this.hasPointer = false;
    this.animatePosition = false;
  }
  render() {
    const style = getPOILineConfig(this.poiStyle, this.lineType);
    const lineHeight = this.height - 2;
    const centerX = 2;
    const isRegularStyle = this.poiStyle === POIStyle.Regular || this.poiStyle === POIStyle.Normal;
    const centerYOffset = isRegularStyle ? 2 : 1;
    const totalHeight = lineHeight + style.width + style.dotStart;
    const translateX = -style.width / 2 + (this.offset < 0 ? this.offset : 0);
    return html`
      <div
        class="offset-wrapper"
        style="--obc-poi-line-transition-duration: ${this.animatePosition ? "0.1s" : "0s"};"
      >
        <div
          class="container"
          style="height: ${totalHeight}px; width: ${style.width}px; transform: translateX(${translateX}px);"
        >
          <obc-poi-graphic-line
            .lineHeight=${lineHeight}
            .lineStyle=${this.poiStyle}
            .lineType=${this.lineType}
            .offset=${this.offset}
          ></obc-poi-graphic-line>
          ${this.hasPointer ? renderPointerDot({
      lineStyle: this.poiStyle,
      centerX: centerX + (this.offset > 0 ? this.offset : 0),
      centerY: lineHeight + centerYOffset,
      width: style.width + (this.offset > 0 ? this.offset : 0),
      vbHeight: totalHeight,
      lineColor: style.lineColor,
      outlineColor: style.outlineColor
    }) : nothing}
        </div>
      </div>
    `;
  }
};
ObcPoiLine.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: Number })
], ObcPoiLine.prototype, "height", 2);
__decorateClass([
  property({ type: String, attribute: "poi-style", reflect: true })
], ObcPoiLine.prototype, "poiStyle", 2);
__decorateClass([
  property({ type: String, attribute: "line-type", reflect: true })
], ObcPoiLine.prototype, "lineType", 2);
__decorateClass([
  property({ type: Number })
], ObcPoiLine.prototype, "offset", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPoiLine.prototype, "hasPointer", 2);
__decorateClass([
  property({ type: Boolean, attribute: "animate-position" })
], ObcPoiLine.prototype, "animatePosition", 2);
ObcPoiLine = __decorateClass([
  customElement("obc-poi-line")
], ObcPoiLine);
export {
  ObcPoiLine
};
//# sourceMappingURL=poi-line.js.map
