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


function Content({ data, setData }) {
  const router = useRouter();
  const parentList = specialties.filter(item => !item.parent);
  const childrenList = specialties.filter(item => item.parent);

  const changedParentList = addKeyToList(parentList, 'label', 'name') || [];
  const changedChildrenList = addKeyToList(childrenList, 'label', 'name') || [];

  const filteredChildrenList = changedChildrenList.filter(item => item.parent === data.category.id);

  const changeData = (value, name) => {
    const current = new URLSearchParams(window.location.search);
    current.set(name, value.id || value);
    const queryString = current.toString();
    router.push(`/doctors?${queryString}`)
    setData({ ...data, [name]: value });
  }

  return (
    <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
      <AutoCompleteSelect
        list={changedParentList}
        updateData={changeData}
        sendAll={true}
        value={data.category.name}
        label="دسته بندی"
        name="category"
      />
      {!!filteredChildrenList.length && (
        <div className="mt-[24px]">
          <AutoCompleteSelect
            list={filteredChildrenList}
            updateData={changeData}
            sendAll={true}
            value={data.expertise}
            name="expertise"
            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
                // value={data.turn}
                checked={data.turn}
                onChange={(event) => changeData(event.target.checked, "turn")}
              />
            }
            sx={{
              ".MuiFormControlLabel-label": {
                color: "#3B3B3B",
                fontSize: "16px",
                fontWeight: 500,
              },
              marginLeft: '0 !important',
            }}
            label="فقط پزشکان دارای نوبت"
            labelPlacement="start"
          />
        </div>
      </div>
    </div>
  );
}

export default Content;