import { requireElement } from "./dom.js";
import {
  formatRideFilterValue,
  normalizeRideFilterRange,
  type RideFilterRangeFormat,
  type RideFilterRangeHandle,
} from "./ride-filters-logic.js";

const mountRangeFilter = (container: HTMLElement): void => {
  const format = container.dataset.rangeFormat as RideFilterRangeFormat | undefined;
  if (!format) throw new Error("Missing ride filter range format");
  const minInput = requireElement(container.querySelector<HTMLInputElement>("[data-range-min]"), "ride filter minimum input");
  const maxInput = requireElement(container.querySelector<HTMLInputElement>("[data-range-max]"), "ride filter maximum input");
  const track = requireElement(container.querySelector<HTMLElement>("[data-range-track]"), "ride filter range track");
  const group = requireElement(container.parentElement, "ride filter group");
  const minOutput = requireElement(group.querySelector<HTMLOutputElement>('[data-range-value="min"]'), "ride filter minimum output");
  const maxOutput = requireElement(group.querySelector<HTMLOutputElement>('[data-range-value="max"]'), "ride filter maximum output");
  const lowerBound = Number(minInput.min);
  const upperBound = Number(minInput.max);

  const update = (changed?: RideFilterRangeHandle): void => {
    const range = normalizeRideFilterRange(Number(minInput.value), Number(maxInput.value), changed ?? "min");
    minInput.value = String(range.min);
    maxInput.value = String(range.max);
    const span = Math.max(upperBound - lowerBound, 1);
    const start = ((range.min - lowerBound) / span) * 100;
    const end = ((range.max - lowerBound) / span) * 100;
    track.style.setProperty("--range-start", `${start}%`);
    track.style.setProperty("--range-end", `${end}%`);
    const minLabel = formatRideFilterValue(format, range.min);
    const maxLabel = formatRideFilterValue(format, range.max);
    minOutput.value = minLabel;
    maxOutput.value = maxLabel;
    minOutput.textContent = minLabel;
    maxOutput.textContent = maxLabel;
    minInput.setAttribute("aria-valuetext", minLabel);
    maxInput.setAttribute("aria-valuetext", maxLabel);
  };

  minInput.addEventListener("input", () => update("min"));
  maxInput.addEventListener("input", () => update("max"));
  update();
};

export const mountRideFilters = (): void => {
  document.querySelectorAll<HTMLElement>("[data-range-filter]").forEach(mountRangeFilter);
};

mountRideFilters();