"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { buildSearchUrl } from "@/lib/buildSearchUrl";

import RedirectLink from "./RedirectLink";
import ModalSearchCity from "./modal";
import ButtonFilter from "./modal/ButtonFilter";
import specialtiesData from "@/data/specialties.json";
import AutoCompleteSearch from "@/components/searchHead/smSearch/AutoCompleteSearch";

function Fields({ city, state }) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [data, setData] = useState({
    province: state?.name || "",
    city: city?.name || "",
    search: "",
  });

  return (
    <>
      <ModalSearchCity
        open={open}
        state={state}
        selected={data}
        setOpen={setOpen}
        setSelected={setData}
      >
        <ButtonFilter setOpen={setOpen} selected={data} />
      </ModalSearchCity>
      <span className="black w-px bg-[#EFEFEF]"></span>
      <div className="!w-full lg:!w-[524px] flex items-center justify-start">
        <AutoCompleteSearch
          noneBg={true}
          data={specialtiesData}
          inputValue={data.search}
          handleSearch={(e) => setData({ ...data, search: e })}
          onEnter={(value) => router.push(buildSearchUrl({ ...data, search: value }))}
          placeholder="جستجوی نام پزشک، تخصص "
        />
      </div>
      <RedirectLink data={data} />
    </>
  );
}

export default Fields;