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";
const group1 = ["خانم", "آقا", "هر دو"];
const group2 = ["فوق تخصص", "دکترای تخصصی", "متخصص", "دکتری"];


function Content({ data, setData }) {
  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);

  console.log(data);
  const changeData = (value, name) => {
    console.log(value);
    console.log(name);

    setData({ ...data, [name]: value })
  };

  return (
    <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
      <AutoCompleteSelect
        list={changedParentList}
        updateData={changeData}
        value={data.category.name}
        label="دسته بندی"
        name="category"
      />
      <div className="mt-[24px]">
        <AutoCompleteSelect
          list={filteredChildrenList}
          disabled={!data.category}
          updateData={changeData}
          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]">
          {/* <p className="text-[#3B3B3B] text-[16px] font-medium">
            فقط پزشکان دارای نوبت
          </p> */}
          {/* <Switch
            onChange={(event) =>
              changeData(event.target.checked, "turn")
            }
          /> */}
          <FormControlLabel
            control={
              <Switch
                onChange={(event) => changeData(event.target.checked, "turn")}
              />
            }
            sx={{
              ".MuiFormControlLabel-label": {
                color: "#3B3B3B",
                fontSize: "16px",
                fontWeight: 500,
              },
              ".MuiFormControlLabel-root.MuiFormControlLabel-labelPlacementStart": {
                marginRight: '0 !important'
              }
            }}
            label="فقط پزشکان دارای نوبت"
            labelPlacement="start" // متن را سمت راست یا چپ قرار می‌دهد
          />
        </div>
      </div>
    </div>
  );
}

export default Content;