import { Button } from "@mui/material";

// Icon
import CloseModalD from "@/components/icons/CloseModalD";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import ArrowLeftM from "@/components/icons/ArrowLeftM";
import { useState } from "react";
import { request } from "@/services/response";

function Content({
  state,
  states,
  selected,
  setDoctors,
  updateData,
  handleClose,
  filteredCities,
  handleSearch,
}) {
  const citySelected = selected.city;
  const [loading, setLoading] = useState(false);
  const listboxProps = {
    style: {
      maxHeight: 200,
      overflow: "auto",
    },
  };

  const handleFilter = (city) => {
    const current = new URLSearchParams(window.location.search);
    current.set("province", city.id);
    const newUrl = `${window.location.pathname}?${current.toString()}`;
    window.history.replaceState({}, "", newUrl);

    handleSearch && handleSearch("");
    handleClose();
  };

  const sendReq = () => {
    setLoading(true);
    const itemCity =
      selected &&
      citySelected &&
      filteredCities.find((item) => item.name === citySelected);

    const params = new URLSearchParams(window.location.search);
    const specialty = params.get("specialty");
    const gender = params.get("gender");
    const degree = params.get("degree");
    const active = params.get("turn");

    const city =
      states.find((item) => item.name === selected.province)?.id || null;
    const state =
      filteredCities.find((item) => item.name === selected.city)?.id || null;

    const requestData = {
      specialty: specialty === "null" ? null : specialty,
      gender,
      degree,
      active,
      city,
      state,
    };

    request
      .getDoctors(requestData)
      .then((res) => {
        if (res && res.data) setDoctors(res.data);
      })
      .catch(() => {})
      .finally(() => {
        setLoading(false);
        handleFilter(itemCity);
      });
  };

  const valState =
    selected &&
    citySelected &&
    filteredCities.find((item) => item.name === citySelected) &&
    citySelected;

  return (
    <div>
      <div className="flex justify-end w-full">
        <div className="cursor-pointer" onClick={handleClose}>
          <CloseModalD />
        </div>
      </div>
      <div className="md:p-[24px] pt-0">
        <p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">
          شهر یا استان مورد نظر را انتخاب نمایید:
        </p>
        <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
          <AutoCompleteSelect
            value={selected.province}
            disabled={state}
            sendAll={true}
            listboxProps={listboxProps}
            updateData={updateData}
            list={states}
            label="استان"
            name="province"
          />
          <AutoCompleteSelect
            updateData={updateData}
            listboxProps={listboxProps}
            sendAll={true}
            value={valState}
            list={filteredCities}
            name="city"
            label="شهر"
            disabled={!selected.province}
          />
        </div>
        <div className="w-full flex justify-end">
          <Button
            loading={loading}
            className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
            onClick={sendReq}
            variant="contained"
            color="primary"
            disabled={!selected.city || !selected.province}
          >
            تایید و ادامه
            <ArrowLeftM />
          </Button>
        </div>
      </div>
    </div>
  );
}

export default Content;