"use client";

import type { Route } from "next";
import type { ChangeEvent, InputHTMLAttributes } from "react";

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

import SearchSVG from "@/assets/icons/search.svg";

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

export default function SearchInput({
  name,
  id,
  placeholder = "Что вы ищете?",
  label,
  className,
  ...inputAttributes
}: InputHTMLAttributes<HTMLInputElement> & {
  name: string;
  id: string;
  label: string;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParamsReadonly = useSearchParams();

  function handleSearch(query: string) {
    const searchParams = new URLSearchParams(searchParamsReadonly);

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

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

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    handleSearch(event.target.value);
  }

  return (
    <div className={clsx(styles["search-input"], className)}>
      <input
        type="search"
        name={name}
        id={id}
        placeholder={placeholder}
        defaultValue={searchParamsReadonly.get(name) ?? ""}
        autoComplete="off"
        {...inputAttributes}
        onChange={handleChange}
        className={styles["search-input__input"]}
      />

      <label htmlFor={id} className={styles["search-input__label"]}>
        <span className="visually-hidden">{label}</span>

        <SearchSVG className={styles["search-input__label-icon"]} />
      </label>
    </div>
  );
}