import { useEffect, useState } from "react";
import FieldDate from "./fields/FieldDate";
import RadioGender from "./fields/RadioGender";
import SendReq from "./sendReq";
import ContentText from "@/app/component/ContentText";
import { request } from "@/services/response";
import Fields from "./Fields";

const validate_medical_number = {
  min: 1,
  max: 9999999999,
};

function Form({ image, data, setData, resetData }) {
  const [services, setServices] = useState([]);

  const changeData = (value, type, name) => {
    type !== "isEdit" &&
      setData((prev) => {
        return {
          ...prev,
          [name]: {
            ...prev[name],
            [type]: value,
          },
        };
      });
  };

  const updateNum = (value, type, name) => {
    const parseValue = +value;
    const { max } = validate_medical_number;
    const validateValue = parseValue > max ? data[name].value : value;
    changeData(validateValue, type, name);
  };

  useEffect(() => {
    request
      .getDoctorServices()
      .then((res) => {
        setServices(res.data);
      })
      .catch(() => {
        //
      });
  }, []);

  return (
    <>
      <div className="mt-[24px] sm-modal scroll-mui md:mt-[26px] lg:mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
        <Fields
          data={data}
          services={services}
          updateNum={updateNum}
          changeData={changeData}
        />
        <div className="flex flex-col gap-y-[24px]">
          <FieldDate changeListData={changeData} data={data?.time_work} />
          <ContentText text="جنسیت">
            <RadioGender
              changeData={changeData}
              data={data?.gender.value}
              name="gender"
            />
          </ContentText>
        </div>
      </div>
      <SendReq img={image} data={data} resetData={resetData} />
    </>
  );
}

export default Form;