import SwitchContent from "./SwitchContent";
import RadioContent from "./RadioContent";
import { filterList } from "@/helper";
import CateSelector from "./CateSelector";

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

function Form({ filter, changeSpecialty, updateData }) {
  const { parentList, childrenList } = filterList(filter);

  return (
    <>
      <CateSelector
        name="category"
        list={parentList}
        label="دسته بندی"
        value={filter.category}
        updateData={changeSpecialty}
      />
      <div
        className={`${!!childrenList.length ? "max-h-32 mt-[24px]" : "max-h-0 mt-0"} overflow-hidden transition-all duration-500`}
      >
        <CateSelector
          name="specialty"
          list={childrenList}
          updateData={changeSpecialty}
          value={filter.specialty}
          // خالی‌بودن یعنی کل گروه؛ برچسب همین را می‌گوید تا کاربر فکر نکند
          // چیزی را جا انداخته.
          label={
            filter.category ? `همه تخصص‌های ${filter.category.name}` : "تخصص"
          }
        />
      </div>
      <div className="mt-[40px] mb-[32px]">
        <RadioContent
          updateData={updateData}
          value={filter.gender}
          text="جنسیت پزشک"
          group={gender}
          name="gender"
        />
        <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
        <RadioContent
          updateData={updateData}
          value={filter.degree}
          text="درجه علمی"
          group={degree}
          name="degree"
        />
        <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
        <SwitchContent filter={filter} updateData={updateData} />
      </div>
    </>
  );
}

export default Form;