import type { Route } from "next";

import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useEffect } from "react";

import { useFilterPanelContext } from "../FilterPanel";

import MultiRangeSlider from "@/components/MultiRangeSlider/MultiRangeSlider";

import { capitalize } from "@/utilities/capitalize";

import styles from "./MultiRangeFilter.module.scss";

export default function MultiRangeFilter({
  label,
  name,
  min,
  max,
  format,
  currency = "RUB",
  unit = "millimeter",
}: {
  label?: string;
  name: string;
  min: number;
  max: number;
  format?: "currency" | "unit";
  currency?: "RUB";
  unit?: "millimeter";
}) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParamsReadonly = useSearchParams();

  const { register } = useFilterPanelContext();

  const searchParams = new URLSearchParams(searchParamsReadonly);

  const minValName = `min${capitalize(name)}`;
  const maxValName = `max${capitalize(name)}`;

  const minValQuery = searchParams.get(minValName);
  const maxValQuery = searchParams.get(maxValName);

  const parsedMinValQuery =
    minValQuery && !isNaN(+minValQuery) ? +minValQuery : undefined;
  const parsedMaxValQuery =
    maxValQuery && !isNaN(+maxValQuery) ? +maxValQuery : undefined;

  const clampedMin = Math.min(max, Math.max(min, parsedMinValQuery ?? min));
  const clampedMax = Math.min(max, Math.max(min, parsedMaxValQuery ?? max));
  const defaultMinVal = Math.max(min, Math.min(clampedMin, clampedMax - 1));
  const defaultMaxVal = Math.min(max, Math.max(clampedMin + 1, clampedMax));

  function handleChange(minVal: number, maxVal: number) {
    searchParams.set(minValName, minVal.toString());
    searchParams.set(maxValName, maxVal.toString());

    router.replace(`${pathname}?${searchParams}` as Route, { scroll: false });
  }

  useEffect(() => {
    register(minValName);
    register(maxValName);
  }, [minValName, maxValName, register]);

  return (
    <div className={styles["multi-range-filter"]}>
      {label && (
        <span className={styles["multi-range-filter__heading"]}>{label}</span>
      )}

      <MultiRangeSlider
        key={`${name}: ${defaultMinVal.toString()}-${defaultMaxVal.toString()}`}
        min={min}
        max={max}
        format={format}
        currency={currency}
        unit={unit}
        defaultMinVal={defaultMinVal}
        defaultMaxVal={defaultMaxVal}
        onChange={handleChange}
        className={styles["multi-range-filter__slider"]}
      />
    </div>
  );
}