"use client";
import { useRouter, useSearchParams } from "next/navigation";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import BoldIcon from "@/components/ui/BoldIcon";
import { getCreateProjectPath } from "@/lib/getCreateContentPath";
import FilterModal from "./FilterModal";
import { useRequireAuth } from "@/lib/auth/useRequireAuth";
import { useTranslation } from "react-i18next";

const TOOLBAR_ICON_SIZE = 25;
const toolbarIconButtonClass =
  "inline-flex h-[25px] w-[25px] items-center justify-center shrink-0 p-0 leading-none";

interface ProjectsFilterProps {
  expertise: string;
}

function ProjectsFilter({ expertise }: ProjectsFilterProps) {
  const { t } = useTranslation("common");
  const router = useRouter();
  const searchParams = useSearchParams();
  const [showFilterModal, setShowFilterModal] = useState<boolean>(false);
  const [selectedExpertise, setSelectedExpertise] = useState<string>(expertise);
  const [filterRequestsPrice, setFilterRequestsPrice] = useState<string>("");
  const [filterAge, setFilterAge] = useState<string>("");
  const [filterGender, setFilterGender] = useState<string>("");
  const requireAuth = useRequireAuth();

  useEffect(() => {
    setSelectedExpertise(expertise);
  }, [expertise]);

  useEffect(() => {
    setFilterRequestsPrice(
      searchParams.get("most_requests")
        ? "request"
        : searchParams.get("most_price")
          ? "price"
          : ""
    );
    setFilterAge(searchParams.get("age") || "");
    setFilterGender(searchParams.get("gender") || "");
    setSelectedExpertise(searchParams.get("expertise") || expertise || "");
  }, [searchParams, expertise]);

  const handleCreateProject = () => {
    if (!requireAuth(t("filters.loginRequired"))) {
      return;
    }
    router.push(getCreateProjectPath());
  };

  const handleFilterChange = () => {
    const currentQuery = new URLSearchParams();

    if (selectedExpertise) {
      currentQuery.set("expertise", selectedExpertise);
    }

    if (filterRequestsPrice) {
      currentQuery.set(
        filterRequestsPrice === "request" ? "most_requests" : "most_price",
        "true"
      );
    }

    if (filterAge) currentQuery.set("age", filterAge);
    if (filterGender) currentQuery.set("gender", filterGender);

    const qs = currentQuery.toString();
    router.push(qs ? `/projects?${qs}` : "/projects");
  };

  const clearFilters = () => {
    setSelectedExpertise("");
    setFilterRequestsPrice("");
    setFilterAge("");
    setFilterGender("");
    router.push("/projects");
    setShowFilterModal(false);
  };

  return (
    <div>
      <div className="flex items-center justify-end gap-3 py-1 text-sm">
        <button
          type="button"
          onClick={() => router.push("/projects/specialists")}
          aria-label={t("projects.specialists.title")}
          className={toolbarIconButtonClass}
        >
          <Image
            src="/images/icons/slider-horizontal.png"
            alt=""
            width={TOOLBAR_ICON_SIZE}
            height={TOOLBAR_ICON_SIZE}
            className="block dark:invert"
          />
        </button>
        <button
          type="button"
          onClick={handleCreateProject}
          aria-label={t("filters.toolbar.newProject")}
          className={toolbarIconButtonClass}
        >
          <BoldIcon name="add-square" size={TOOLBAR_ICON_SIZE} className="block" />
        </button>
        <button
          type="button"
          onClick={() => router.push("/search?type=user")}
          aria-label={t("filters.toolbar.search")}
          className={toolbarIconButtonClass}
        >
          <BoldIcon name="search-normal" size={TOOLBAR_ICON_SIZE} className="block" />
        </button>
        <button
          type="button"
          onClick={() => setShowFilterModal(true)}
          aria-label={t("filters.toolbar.filter")}
          className={toolbarIconButtonClass}
        >
          <BoldIcon name="candle" size={TOOLBAR_ICON_SIZE} className="block" />
        </button>
      </div>
      {showFilterModal && (
        <FilterModal
          setShowFilterModal={setShowFilterModal}
          showFilterModal={showFilterModal}
          selectedExpertise={selectedExpertise}
          setSelectedExpertise={setSelectedExpertise}
          setFilterRequestsPrice={setFilterRequestsPrice}
          setFilterAge={setFilterAge}
          setFilterGender={setFilterGender}
          filterRequestsPrice={filterRequestsPrice}
          filterAge={filterAge}
          filterGender={filterGender}
          handleFilterChange={handleFilterChange}
          clearFilters={clearFilters}
        />
      )}
    </div>
  );
}

export default ProjectsFilter;
