"use client";

import { useState } from "react";
import SearchBar from "./search";
import SortList from "./sortlist";
import { Button } from "@mui/material";
import ListDoctors from "./listDoctors";
import LocationD from "../icons/LocationD";
import ModalSearchCity from "@/app/component/modalSearchCity";

// Data
import specialties from "@/data/specialties.json";

function DoctorsPage({ params, matchedCity, matchedState, list }) {
  const fieldId = params.field;
  const [doctors, setDoctors] = useState(list);
  const [open, setOpen] = useState(false);
  const [fields, setFields] = useState({
    search: "",
    stars: null,
  });
  const [selected, setSelected] = useState({
    province: matchedState?.name || params?.province,
    city: matchedCity?.name || params?.city,
  });

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

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

  return (
    <div className="pt-[95px] sm:pt-[120px] padding-responsive">
      <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}
          setOpen={setOpen}
          selected={selected}
          state={matchedState}
          setSelected={setSelected}
        >
          <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">
              {" "}
              {selected.province || "استان"}
              {" / "}
              {selected.city || "شهر"}
            </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}
            setData={setData}
            setFields={setFields}
            setDoctors={setDoctors}
            matchedCity={matchedCity}
            matchedState={matchedState}
            confirmedData={confirmedData}
            setConfirmedData={setConfirmedData}
          />
          <SortList data={data} setData={setData} />
        </div>
      </div>
      <ListDoctors list={doctors} />
    </div>
  );
}

export default DoctorsPage;