import type { Route } from "next";
import type { ReactNode } from "react";

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

import { useFilterPanelContext } from "../FilterPanel";
import styles from "./SelectFilter.module.scss";

const SelectFilterContext = createContext<{
  name: string;
  selectedValues: string[];
  onSelect: (value: string) => void;
} | null>(null);

export const useSelectFilterContext = () => {
  const contextValue = useContext(SelectFilterContext);

  if (!contextValue)
    throw new Error(
      "SelectFilterContext has been used outside of its corresponsing provider",
    );

  return contextValue;
};

export default function SelectFilter({
  name,
  children,
}: {
  name: string;
  children: ReactNode;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParamsReadonly = useSearchParams();

  const { register } = useFilterPanelContext();

  const searchParams = new URLSearchParams(searchParamsReadonly);
  const selectedValues = searchParamsReadonly.getAll(name);

  function handleSelect(value: string) {
    const isSelected = searchParams.getAll(name).includes(value);

    if (isSelected) {
      searchParams.delete(name, value);
    } else {
      searchParams.set(name, value);
    }

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

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

  return (
    <SelectFilterContext.Provider
      value={{ name, selectedValues, onSelect: handleSelect }}
    >
      <div className={styles["select-filter"]}>{children}</div>
    </SelectFilterContext.Provider>
  );
}