import { r, h as n, H as e } from "./reactcomponent-44b70bf6.mjs";
import { U as o } from "./unit-system.enum-eaefb53e-0f424da4.mjs";
import "react";
import "react-dom";
const h = ":host{display:grid;gap:24px;grid-auto-flow:column;align-items:center;grid-template-columns:24px 1fr;border-top:1px solid #e5e7eb;padding:16px}.icon{width:24px;height:24px}.description{font-size:16px;display:grid;gap:8px;height:-moz-fit-content;height:fit-content}.description__text{margin:0;font-size:16px;word-break:break-all}.description mi-distance{font-size:12px;color:#6b7280}", u = class {
  constructor(t) {
    r(this, t), this.maneuver = void 0, this.maneuverData = void 0, this.translations = void 0, this.translationsData = void 0, this.unit = o.Metric;
  }
  parseManeuverProp() {
    this.maneuverData = JSON.parse(this.maneuver);
  }
  parseTranslationsProp() {
    this.translationsData = JSON.parse(this.translations);
  }
  componentWillLoad() {
    this.parseManeuverProp(), this.parseTranslationsProp();
  }
  /**
   * Get maneuver name.
   *
   * @returns {string}
   */
  getManeuverName(t) {
    if (t.includes("straight"))
      return "straight";
    if (t.includes("sharp right"))
      return "sharp-right";
    if (t.includes("sharp left"))
      return "sharp-left";
    if (t.includes("slight right"))
      return "slight-right";
    if (t.includes("slight left"))
      return "slight-left";
    if (t.includes("right"))
      return "right";
    if (t.includes("left"))
      return "left";
    if (t.includes("uturn"))
      return "u-turn";
    if (t.includes("depart"))
      return "straight";
  }
  render() {
    return this.maneuverData && this.translationsData ? this.renderManeuver() : null;
  }
  /**
   * Render step.
   *
   * @returns {JSX.Element}
   */
  renderManeuver() {
    const t = {
      straight: this.translationsData.continueStraightAhead,
      left: `${this.translationsData.goLeft} ${this.translationsData.andContinue}`,
      "sharp-left": `${this.translationsData.goSharpLeft} ${this.translationsData.andContinue}`,
      "slight-left": `${this.translationsData.goSlightLeft} ${this.translationsData.andContinue}`,
      right: `${this.translationsData.goRight} ${this.translationsData.andContinue}`,
      "sharp-right": `${this.translationsData.goSharpRight} ${this.translationsData.andContinue}`,
      "slight-right": `${this.translationsData.goSlightRight} ${this.translationsData.andContinue}`,
      "u-turn": `${this.translationsData.turnAround} ${this.translationsData.andContinue}`
      // 'Turn around and continue'
    }, a = this.getManeuverName(this.maneuverData.maneuver.toLowerCase()), i = `arrow-${a}`, s = this.maneuverData.instructions ? this.maneuverData.instructions : t[a];
    return n(e, null, n("div", { class: "icon" }, a ? n("mi-icon", { part: "maneuver-icon", "icon-name": i }) : null), n("div", { class: "description" }, n("div", { class: "description__text" }, s), n("mi-distance", { part: "maneuver-description-distance", meters: this.maneuverData.distance.value, unit: this.unit })));
  }
  static get watchers() {
    return {
      maneuver: ["parseManeuverProp"],
      translations: ["parseTranslationsProp"]
    };
  }
};
u.style = h;
export {
  u as mi_route_instructions_maneuver
};
//# sourceMappingURL=mi-route-instructions-maneuver.entry-18d07ca4.mjs.map
