import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import SwitchContent from "./SwitchContent";
import RadioContent from "./RadioContent";
import { filterList } from "@/helper";
import { useState } from "react";

const gender = ["زن", "مرد", "هر دو"];
const degree = ["پزشک عمومی", "پزشک متخصص", "پزشک فوق تخصص", "همه موارد"];

function Form({ data, changeUrl, changeData }) {
  const [list, setList] = useState({});
  const { parentList, childrenList } = filterList(data);
  console.log(filterList(data));

  return (
    <>
      <AutoCompleteSelect
        list={list.parentList}
        sendAll={true}
        label="دسته بندی"
        value={data.category?.name}
        updateData={(value) => {
          const newData = changeData(value, "specialties", true);
          setList(filterList(newData));
          console.log(newData);
        }}
      />
      {!!childrenList.length && (
        <div className="mt-[24px]">
          <AutoCompleteSelect
            list={list.childrenList}
            updateData={(value) => changeData(value, "specialties")}
            sendAll={true}
            value={data.specialties?.name}
            label="تخصص"
          />
        </div>
      )}
      <div className="mt-[40px] mb-[32px]">
        <RadioContent
          changeData={changeData}
          value={data.gender}
          text="جنسیت پزشک"
          group={gender}
          name="gender"
        />
        <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
        <RadioContent
          changeData={changeData}
          value={data.degree}
          text="درجه علمی"
          group={degree}
          name="degree"
        />
        <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
        <SwitchContent data={data} />
      </div>
    </>
  );
}

export default Form;