import { useState } from "react";

import SearchBar from "../search";
import SortList from "../sortlist";
import { Button } from "@mui/material";
import { useParams } from "next/navigation";
import LocationD from "../../icons/LocationD";
import specialties from "@/data/specialties.json";
import ModalSearchCity from "@/app/component/modalSearchCity";

// Data
import states from "@/data/state.json";
import cities from "@/data/city.json";

function Head({ matchedCity, matchedState, setDoctors }) {
  const params = useParams();
  const fieldName = params.field;
  const [open, setOpen] = useState(false);
  const [fields, setFields] = useState({
    search: params.search || "",
    stars: "",
  });

  const findItem = (key, name) =>
    specialties.find((item) => item[key] === name);
  const isParent =
    findItem("name", fieldName) && findItem("name", fieldName).parent;

  const defaultData = {
    category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
    specialties: isParent && findItem("name", fieldName),
    turn: params && params.hasOwnProperty("turn") ? JSON.parse(params.turn) : 1,
    gender: params.gender || "هر دو",
    degree: params.degree || "همه موارد",
  };

  const selectedState = matchedState?.name || params?.state;
  const selectedCity =
    (matchedCity?.name && matchedCity?.id !== "63"
      ? matchedCity?.name
      : false) || params?.city;

  const defaultFilter = {
    state: selectedState && states.find((item) => item.name === selectedState),
    city: selectedCity && cities.find((item) => item.name === selectedCity),
    category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
    specialty: isParent && findItem("name", fieldName),
    active: params.active || 0,
    gender: params.gender || "هر دو",
    degree: params.degree || "همه موارد",
    sort: "",
    name: "",
  };
  const modalLocate = () => {
    setOpen(false);
  };

  const [data, setData] = useState(defaultData);
  const [confirmedData, setConfirmedData] = useState(defaultData);
  const [filter, setFilter] = useState(defaultFilter);

  console.log(filter);
  

  const updateData = (name, value) => setFilter({ ...filter, [name]: value });

  return (
    <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
      <ModalSearchCity
        open={open}
        filter={filter}
        setOpen={setOpen}
        state={matchedState}
        setFilter={setFilter}
        modalLocate={modalLocate}
      >
        <Button
          className="!flex !ml-auto !w-fit !px-3 !py-1 !items-center !justify-start !gap-2 !cursor-pointer"
          onClick={() => setOpen(true)}
        >
          <LocationD />
          <h1 className="text-[#525252] text-[16px] font-semibold">
            {" "}
            {filter?.state?.name || "استان"}
            {" / "}
            {filter?.city?.name || "شهر"}
          </h1>
        </Button>
      </ModalSearchCity>
      <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
        <SearchBar
          data={data}
          fields={fields}
          filter={filter}
          setData={setData}
          setFilter={setFilter}
          setDoctors={setDoctors}
          updateData={updateData}
          matchedCity={matchedCity}
          matchedState={matchedState}
          confirmedData={confirmedData}
          setConfirmedData={setConfirmedData}
        />
        <SortList
          data={data}
          fields={fields}
          filter={filter}
          setData={setData}
          setFields={setFields}
          updateData={updateData}
          setDoctors={setDoctors}
          matchedCity={matchedCity}
          matchedState={matchedState}
        />
      </div>
    </div>
  );
}

export default Head;