import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import RadioContent from "./RadioContent";
import { FormControlLabel, Switch } from "@mui/material";
import { useRouter } from "next/navigation";
import { filterList } from "@/helper";
const group1 = ["خانم", "آقا", "هر دو"];
const group2 = ["فوق تخصص", "دکترای تخصصی", "متخصص", "دکتری"];

function Content({ data, setData }) {
  const router = useRouter();
  const { parentList, childrenList } = filterList(data);

  const changeUrl = (value, name, removeSpecialties) => {
    const current = new URLSearchParams(window.location.search);
    current.set(name, value.id || value);
    if (removeSpecialties) {
      current.delete("specialties");
    }
    const queryString = current.toString();
    router.push(`/doctors?${queryString}`);
  };

  const changeData = (value, name, removeSpecialties) => {
    changeUrl(value, name, removeSpecialties);
    const newData = data;
    newData[name] = value;
    if (removeSpecialties) {
      newData.specialties = "";
    }
    setData(newData);
  };

  return (
    <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
      <AutoCompleteSelect
        list={parentList}
        updateData={(value, name) => changeData(value, name, true)}
        sendAll={true}
        value={data.category.name}
        label="دسته بندی"
        name="category"
      />
      {!!childrenList.length && (
        <div className="mt-[24px]">
          <AutoCompleteSelect
            list={childrenList}
            updateData={changeData}
            sendAll={true}
            value={data.specialties}
            name="specialties"
            label="تخصص"
          />
        </div>
      )}
      <div className="mt-[40px] mb-[32px]">
        <RadioContent
          changeData={changeData}
          value={data.gender}
          text="جنسیت پزشک"
          group={group1}
          name="gender"
        />
        <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
        <RadioContent
          changeData={changeData}
          value={data.degree}
          text="درجه علمی"
          group={group2}
          name="degree"
        />
        <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
        <div className="flex items-center justify-start gap-[12px]">
          <FormControlLabel
            control={
              <Switch
                checked={data.turn}
                onChange={(event) => {
                  changeData(event.target.checked ? 1 : 0, "turn");
                }}
              />
            }
            sx={{
              ".MuiFormControlLabel-label": {
                color: "#3B3B3B",
                fontSize: "16px",
                fontWeight: 500,
              },
              marginLeft: "0 !important",
            }}
            label="فقط پزشکان دارای نوبت"
            labelPlacement="start"
          />
        </div>
      </div>
    </div>
  );
}

export default Content;