"use client";

import type { ReactNode } from "react";

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

import CloseSVG from "@/assets/icons/close.svg";
import ReloadSVG from "@/assets/icons/reload.svg";

import Button from "@/components/Button/Button";
import { FilterSection } from "./FilterSection/FilterSection";

import { useFilterPanel } from "@/hooks/useFilterPanel";
import clsx from "clsx";
import styles from "./FilterPanel.module.scss";

const FilterPanelContext = createContext<{
  register: (name: string, value?: string | string[]) => void;
} | null>(null);

export const useFilterPanelContext = () => {
  const contextValue = useContext(FilterPanelContext);

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

  return contextValue;
};

export function FilterPanel({ children }: { children: ReactNode }) {
  const router = useRouter();
  const searchParamsReadonly = useSearchParams();

  const searchParams = new URLSearchParams(searchParamsReadonly);

  const { isOpen, onCloseFilter } = useFilterPanel();
  const registeredFilters = useRef(new Set<string>());

  function handleRegisterFilter(name: string) {
    onCloseFilter();
    registeredFilters.current.add(name);
  }

  function handleResetFilters() {
    registeredFilters.current.forEach((name) => {
      searchParams.delete(name);
    });

    onCloseFilter();
    router.replace("/", { scroll: false });
  }

  return (
    <FilterPanelContext.Provider value={{ register: handleRegisterFilter }}>
      <div
        className={clsx(
          styles["filter-panel"],
          styles[`filter-panel--slider`],
          isOpen && styles["filter-panel--open"],
        )}
      >
        <div className={styles["filter-panel__header"]}>
          <span className={styles["filter-panel__heading"]}>Фильтры</span>

          <div className={styles["filter-panel__button-group"]}>
            <Button
              icon={ReloadSVG}
              variant="plain"
              onClick={handleResetFilters}
              className={styles["filter-panel__reset-button"]}
            />

            {isOpen && (
              <Button
                variant="primary"
                icon={CloseSVG}
                onClick={onCloseFilter}
                className={styles["filter-panel__close-button"]}
              />
            )}
          </div>
        </div>

        <div className={styles["filter-panel__body"]}>
          {children}

          <FilterSection>
            <Button
              variant="primary"
              fill
              onClick={() => {
                onCloseFilter();
                window.scrollTo({ top: 0 });
              }}
            >
              Применить
            </Button>
          </FilterSection>
        </div>
      </div>
    </FilterPanelContext.Provider>
  );
}