import { r as B, c as R, h as e } from "./reactcomponent-44b70bf6.mjs";
import { U as $ } from "./unit-system.enum-eaefb53e-0f424da4.mjs";
import { c as N } from "./utils-ae714467-b07fc3be.mjs";
import "react";
import "react-dom";
const H = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.step{display:grid;gap:16px;justify-items:center}.step__info{display:grid;grid-auto-flow:column;align-items:center;justify-content:space-between;width:100%;position:sticky;top:50px;background:white;z-index:1000;padding-bottom:8px}.step__destination{display:grid;gap:8px;align-items:center;justify-content:center;grid-auto-flow:column}.step__heading{font-weight:500;font-size:1.25rem;margin:0}.step__heading>span{font-size:0.875rem;color:#6b7280}.step__travel-mode{display:flex;justify-content:center;align-items:center;position:relative;min-height:72px}.step__travel-mode::before{position:absolute;width:calc(50% - 2px);left:0;height:100%;content:""}.step__travel-mode--dotted::before{border-right:4px dotted #bfdbfe}.step__travel-mode--solid::before{border-right:4px solid #bfdbfe}.step__travel-mode-icon{position:absolute;left:50%;top:24px;transform:translateX(-50%);background-color:#fcfcfc;padding:3px;border-radius:4px}.step__travel-mode-icon mi-icon{width:16px;height:16px;background-color:#6b7280;display:block}.step__short-name{margin-right:4px;padding:2px 4px;font-size:0.875rem;color:#fcfcfc;background-color:#6b7280;border-radius:2px}.step__distance-duration{color:#6b7280;font-size:0.875rem}.step__transit-action{font-weight:400;font-size:0.875rem;color:#6b7280}.step__toggle{display:grid;justify-content:center}.step__toggle mi-icon{width:24px;height:24px;display:block}.step__details{display:grid;gap:24px;width:100%}', O = class {
  constructor(t) {
    B(this, t), this.stepClicked = R(this, "stepClicked", 7), this.substepsToggled = R(this, "substepsToggled", 7), this.isInternetExplorer = N(), this.step = void 0, this.stepData = void 0, this.hideIndoorSubsteps = !0, this.fromRouteContext = "", this.fromTravelMode = void 0, this.fromTransitStop = void 0, this.unit = navigator.language === "en-US" ? $.Imperial : $.Metric, this.showToggleButton = !0, this.translations = void 0, this.translationsData = void 0, this.substepsAreOpen = !1;
  }
  parseStepProp() {
    this.step && (this.stepData = JSON.parse(this.step));
  }
  parseTranslationsProp() {
    this.translations && (this.translationsData = JSON.parse(this.translations));
  }
  /**
   * Programmatically open the substeps.
   */
  openSubsteps() {
    this.substepsAreOpen = !0;
  }
  /**
   * Programmatically close the substeps.
   */
  closeSubsteps() {
    this.substepsAreOpen = !1;
  }
  /**
   * Component will load.
   */
  componentWillLoad() {
    this.parseStepProp(), this.parseTranslationsProp();
  }
  /**
   * Render if there is step data.
   *
   * @returns {JSX.Element}
   */
  render() {
    return this.stepData && this.translationsData ? this.renderStep() : null;
  }
  /**
   * Emits stepClicked event (if click target is not related to an action).
   *
   * @param event - Event.
   */
  stepClickHandler(t) {
    if (Array.from(t.target.classList).includes("icon-toggle"))
      return;
    let s = null;
    t.target.dataset.maneuverIndex !== void 0 && (s = parseInt(t.target.dataset.maneuverIndex)), this.stepClicked.emit({ maneuverIndex: s });
  }
  /**
   * Render step part depending on travel mode.
   *
   * @returns {JSX.Element}
   */
  renderStep() {
    switch (this.stepData.travel_mode.toUpperCase()) {
      case "DRIVING":
        return this.renderDrivingStep();
      case "WALKING":
        return this.renderWalkingStep();
      case "BICYCLING":
        return this.renderBicyclingStep();
      case "TRANSIT":
        return this.renderTransitStep();
      default:
        return e("div", null, "Unknown travel mode: ", this.stepData.travel_mode);
    }
  }
  /**
   * Render the travel mode indicator and dotted/solid line.
   *
   * @returns {JSX.Element}
   */
  renderTravelMode() {
    if (this.isInternetExplorer)
      return null;
    let t;
    switch (this.stepData.travel_mode.toUpperCase()) {
      case "DRIVING":
        t = "car";
        break;
      case "WALKING":
        t = "walk";
        break;
      case "BICYCLING":
        t = "bike";
        break;
      case "TRANSIT":
        t = this.getTransitVehicleIconName();
        break;
    }
    return e("span", { part: "step-travel-mode", class: `step__travel-mode step__travel-mode--${this.stepData.travel_mode.toUpperCase() === "TRANSIT" ? "solid" : "dotted"}` }, e("span", { class: "step__travel-mode-icon" }, e("mi-icon", { part: "step-travel-mode-icon", "icon-name": t })));
  }
  /**
   * Get icon name for transit vehicle.
   *
   * @returns {string}
   */
  getTransitVehicleIconName() {
    var t, s;
    const i = (s = (t = this.stepData.transit_information) === null || t === void 0 ? void 0 : t.line.vehicle) === null || s === void 0 ? void 0 : s.type.toLowerCase();
    return i && ["boat", "bus", "railway", "train", "subway"].some((a) => a === i) ? i : "transit";
  }
  /**
   * Toggles visibility of sub steps (steps in steps).
   */
  toggleSubsteps() {
    this.substepsToggled.emit(), this.substepsAreOpen = !this.substepsAreOpen;
  }
  /**
   * Render substeps if they should be visible.
   *
   * @returns {JSX.Element}
   */
  renderSubsteps() {
    var t;
    return this.substepsAreOpen === !0 ? e("div", { class: "step__substeps" }, (t = this.stepData.steps) === null || t === void 0 ? void 0 : t.map((s, i) => e("mi-route-instructions-maneuver", {
      "data-maneuver-index": i,
      maneuver: JSON.stringify(s),
      translations: this.translations,
      unit: this.unit,
      // @ts-ignore
      exportparts: `
                        maneuver-icon,
                        maneuver-description,
                        maneuver-description-distance,
                        maneuver-description-distance-border`
    }))) : null;
  }
  /**
   * Render the toggle button for the sub step expander.
   *
   * @returns {JSX.Element}
   */
  renderToggleButton() {
    var t;
    return ((t = this.stepData.steps) === null || t === void 0 ? void 0 : t.length) <= 0 || !this.showToggleButton ? null : e("span", { class: "step__toggle", onClick: () => this.toggleSubsteps() }, this.substepsAreOpen ? e("mi-icon", { part: "step-toggle", "icon-name": "chevron-up" }) : e("mi-icon", { part: "step-toggle", "icon-name": "chevron-down" }));
  }
  /**
   * Render distance part.
   *
   * @returns {JSX.Element}
   */
  renderDistance() {
    return e("span", { part: "step-info", class: "step__distance-duration" }, e("mi-distance", { meters: this.stepData.distance.value, unit: this.unit }), e("br", null));
  }
  /**
   * Render toggle and substeps.
   *
   * @returns {JSX.Element}
   */
  showSubsteps() {
    return e("div", { class: "step__details" }, this.renderSubsteps());
  }
  /**
   * Render a driving step.
   *
   * @returns {JSX.Element}
   */
  renderDrivingStep() {
    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { class: "step__info" }, e("div", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderToggleButton()), this.showSubsteps());
  }
  /**
   * Get display heading.
   *
   * @returns {string}
   */
  getStepHeading() {
    var t;
    const s = {
      driving: this.translationsData.drive,
      walking: this.translationsData.walk,
      bicycling: this.translationsData.bike
    };
    return !((t = this.stepData.steps[0]) === null || t === void 0) && t.instructions ? this.stepData.steps[0].instructions : s[this.stepData.travel_mode.toLowerCase()];
  }
  /**
   * Render a walking step.
   *
   *
   * @returns {JSX.Element}
   */
  renderWalkingStep() {
    let t;
    return this.stepData.parking === !0 ? t = `${this.translationsData.park} ${this.stepData.label ? ` ${this.translationsData.at} ` + this.stepData.label : ""}` : this.stepData.highway && this.stepData.highway.toUpperCase() === "STEPS" ? t = `${this.translationsData.takeStaircaseToLevel} ${this.stepData.end_location.floor_name}` : this.stepData.highway && this.stepData.highway.toUpperCase() === "LADDER" ? t = `${this.translationsData.takeLadderToLevel} ${this.stepData.end_location.floor_name}` : this.stepData.highway && this.stepData.highway.toUpperCase() === "ESCALATOR" ? t = `${this.translationsData.takeEscalatorToLevel} ${this.stepData.end_location.floor_name}` : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRRAMP" ? t = `${this.translationsData.takeWheelchairRampToLevel} ${this.stepData.end_location.floor_name}` : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRLIFT" ? t = `${this.translationsData.takeWheelchairLiftToLevel} ${this.stepData.end_location.floor_name}` : this.stepData.highway && this.stepData.highway.toUpperCase() === "ELEVATOR" ? t = `${this.translationsData.takeElevatorToLevel} ${this.stepData.end_location.floor_name}` : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "Outside" ? t = this.addStepContextNameToHeading(this.translationsData.exit, this.stepData.start_context) : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "InsideBuilding" ? t = this.getStepHeading() : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" && this.fromTravelMode.toUpperCase() === "TRANSIT" ? t = this.fromTransitStop : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" ? t = this.getStepHeading() : this.fromRouteContext === "Outside" && this.stepData.route_context === "InsideBuilding" ? t = this.addStepContextNameToHeading(this.translationsData.enter, this.stepData.end_context) : t = this.fromRouteContext === "InsideBuilding" ? "Inside Building" : this.fromRouteContext, e("div", { class: "step", onClick: (s) => this.stepClickHandler(s) }, e("div", { class: "step__info" }, e("div", { part: "step-heading", class: "step__heading" }, t), this.renderToggleButton()), this.showSubsteps());
  }
  /**
   * Add building or venue name to the step heading.
   *
   * @param {string} heading
   * @param {StepContext} stepContext
   * @returns {string}
   */
  addStepContextNameToHeading(t, s) {
    return s && (s.building ? t += ` ${s.building.buildingInfo.name} ${this.translationsData.building}` : s.venue && (t += ` ${s.venue.venueInfo.name} ${this.translationsData.venue}`)), t;
  }
  /**
   * Render a bicycling step.
   *
   * @returns {JSX.Element}
   */
  renderBicyclingStep() {
    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { class: "step__info" }, e("div", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderToggleButton()), this.showSubsteps());
  }
  /**
   * Render a transit step. Inclusing BUSWAY instruction.
   *
   * @returns {JSX.Element}
   */
  renderTransitStep() {
    var t, s, i, n, a, o, r, l, p, d, h, u, c, _, v, g, m, f, D, b, S, T, x, y, k, I, w, C, A;
    return e("div", { class: "step", onClick: (L) => this.stepClickHandler(L) }, e("div", { class: "step__info" }, e("h3", { part: "step-heading", class: "step__heading" }, this.stepData.travel_mode === "TRANSIT" ? `${this.translationsData.rideTheBus}` : (t = this.stepData) === null || t === void 0 ? void 0 : t.instructions), this.renderToggleButton()), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, !((n = (i = (s = this.stepData) === null || s === void 0 ? void 0 : s.transit_information) === null || i === void 0 ? void 0 : i.line) === null || n === void 0) && n.short_name ? e("span", { class: "step__short-name", style: {
      backgroundColor: !((r = (o = (a = this.stepData) === null || a === void 0 ? void 0 : a.transit_information) === null || o === void 0 ? void 0 : o.line) === null || r === void 0) && r.color ? (d = (p = (l = this.stepData) === null || l === void 0 ? void 0 : l.transit_information) === null || p === void 0 ? void 0 : p.line) === null || d === void 0 ? void 0 : d.color : null,
      color: !((c = (u = (h = this.stepData) === null || h === void 0 ? void 0 : h.transit_information) === null || u === void 0 ? void 0 : u.line) === null || c === void 0) && c.text_color ? (g = (v = (_ = this.stepData) === null || _ === void 0 ? void 0 : _.transit_information) === null || v === void 0 ? void 0 : v.line) === null || g === void 0 ? void 0 : g.text_color : null
    } }, (D = (f = (m = this.stepData) === null || m === void 0 ? void 0 : m.transit_information) === null || f === void 0 ? void 0 : f.line) === null || D === void 0 ? void 0 : D.short_name) : null, !((S = (b = this.stepData) === null || b === void 0 ? void 0 : b.transit_information) === null || S === void 0) && S.headsign ? (x = (T = this.stepData) === null || T === void 0 ? void 0 : T.transit_information) === null || x === void 0 ? void 0 : x.headsign : null, e("br", null), e("span", { part: "step-info", class: "step__distance-duration" }, e("mi-time", { seconds: (k = (y = this.stepData) === null || y === void 0 ? void 0 : y.duration) === null || k === void 0 ? void 0 : k.value, translations: `{"days":"${this.translationsData.days}","hours":"${this.translationsData.hours}","minutes":"${this.translationsData.minutes}"}` }), " · ", !((w = (I = this.stepData) === null || I === void 0 ? void 0 : I.transit_information) === null || w === void 0) && w.num_stops ? (A = (C = this.stepData) === null || C === void 0 ? void 0 : C.transit_information) === null || A === void 0 ? void 0 : A.num_stops : null, " ", this.translationsData.stops ? this.translationsData.stops : null)), this.showSubsteps());
  }
  static get watchers() {
    return {
      step: ["parseStepProp"],
      translations: ["parseTranslationsProp"]
    };
  }
};
O.style = H;
export {
  O as mi_route_instructions_step
};
//# sourceMappingURL=mi-route-instructions-step.entry-eb959e9b.mjs.map
