marco.pms.web/src/components/Project/Infrastructure/FloorModel.jsx

import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import showToast from "../../../services/toastService";
import { useManageProjectInfra } from "../../../hooks/useProjects";
import { useSelector } from "react-redux";
import Label from "../../common/Label";
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";

// Schema
const floorSchema = z.object({
  buildingId: z
    .string()
    .refine((val) => val !== "0", { message: "Building is required" }),
  id: z.string().optional(),
  floorName: z.string().min(1, "Floor Name is required"),
});
const defaultValues = {
  id: "0",
  floorName: "",
  buildingId: "0",
};

const FloorModel = ({ project, onClose, onSubmit }) => {
  const selectedProject = useSelector(
    (store) => store.localVariables.projectId
  );
  const [selectedBuilding, setSelectedBuilding] = useState(null);

  const methods = useForm({
    defaultValues,
    resolver: zodResolver(floorSchema),
  });

  const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
  const watchId = watch("id");
  const watchBuildingId = watch("buildingId");
  const { mutate: ManageFloor, isPending } = useManageProjectInfra({
    onSuccessCallback: (data, variables) => {
      showToast(
        watchId != "0"
          ? "Floor updated Successfully"
          : "Floor created Successfully",
        "success"
      );
      reset({ id: "0", floorName: "" });
      // onClose?.();
    },
  });

  useEffect(() => {
    reset(defaultValues);
  }, []);
  useEffect(() => {
    const building = project?.find((b) => b.id === watchBuildingId);
    setSelectedBuilding(building || null);
  }, [watchBuildingId, project]);

  const handleBuildingChange = (e) => {
    const id = e.target.value;
    setValue("buildingId", id, { shouldValidate: true });
    setValue("id", "0");
    setValue("floorName", "");
  };

  const handleFloorChange = (e) => {
    const id = e.target.value;
    setValue("id", id);

    const floor = selectedBuilding?.floors?.find((f) => f.id === id);
    if (floor) {
      setValue("floorName", floor.floorName);
    } else {
      setValue("floorName", "");
    }
  };

  const onFormSubmit = (data) => {
    const isEdit = data.id !== "0";
    const payload = {
      ...data,
      id: isEdit ? data.id : null,
    };
    let infraObject = [
      {
        building: null,
        floor: payload,
        workArea: null,
      },
    ];

    ManageFloor({ infraObject, projectId: selectedProject });
  };

  return (
    <AppFormProvider {...methods}>
      <form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
        <div className="text-center mb-1">
          <h5 className="mb-1">Manage Floor</h5>
        </div>
        <div className="col-12 text-start">
          <Label className="form-label" required>
            Select Building
          </Label>
          <AppFormController
            name="buildingId"
            control={control}
            rules={{ required: "Building is required" }}
            render={({ field }) => (
              <SelectField
                label=""
                placeholder="Select Building"
                options={
                  project
                    ?.filter((b) => b.buildingName)
                    .sort((a, b) => a.buildingName.localeCompare(b.buildingName))
                    .map((b) => ({ id: String(b.id), name: b.buildingName })) ?? []
                }
                value={field.value || ""}
                onChange={(value) => {
                  field.onChange(value);
                  setValue("id", "0");
                  setValue("floorName", "");
                }}
                required
                noOptionsMessage={() => (!project || project.length === 0 ? "No buildings found" : null)}
                className="m-0 form-select-sm w-100"
              />
            )}
          />
          {errors.buildingId && <p className="danger-text">{errors.buildingId.message}</p>}
        </div>

        {watchBuildingId !== "0" && (
          <>
            <div className="col-12 text-start">
              <Label className="form-label">
                Select Floor
              </Label>

              <AppFormController
                name="id"
                control={control}
                rules={{ required: "Floor is required" }}
                render={({ field }) => {
                  // Prepare options
                  const floorOptions = [
                    { id: "0", name: "Add New Floor" },
                    ...(selectedBuilding?.floors
                      ?.filter((f) => f.floorName)
                      .sort((a, b) => a.floorName.localeCompare(b.floorName))
                      .map((f) => ({ id: f.id, name: f.floorName })) ?? []),
                  ];

                  return (
                    <SelectField
                      label=""
                      placeholder="Select Floor"
                      options={floorOptions}
                      value={field.value || "0"} // default to "0"
                      onChange={(val) => {
                        field.onChange(val); // update react-hook-form

                        if (val === "0") {
                          setValue("floorName", ""); // clear for new floor
                        } else {
                          const floor = selectedBuilding?.floors?.find(f => f.id === val);
                          setValue("floorName", floor?.floorName || "");
                        }
                      }}
                      required
                      noOptionsMessage={() =>
                        !selectedBuilding?.floors || selectedBuilding.floors.length === 0
                          ? "No floors found"
                          : null
                      }
                      className="m-0 form-select-sm w-100"
                    />
                  );
                }}
              />

              {errors.id && (
                <span className="danger-text">{errors.id.message}</span>
              )}
            </div>


            <div className="col-12 text-start">
              <Label className="form-label" required>
                {watchId !== "0" ? "Edit Floor Name" : "New Floor Name"}
              </Label>
              <input
                {...register("floorName")}
                className="form-control"
                placeholder="Floor Name"
              />
              {errors.floorName && (
                <p className="danger-text">{errors.floorName.message}</p>
              )}
            </div>
          </>
        )}

        <div className="col-12 text-end mt-6 my-2">
          <button
            type="button"
            className="btn btn-sm btn-label-secondary me-3"
            disabled={isPending}
            onClick={onClose}
          >
            Cancel
          </button>
          <button
            type="submit"
            className="btn btn-sm btn-primary"
            disabled={isPending}
          >
            {isPending
              ? "Please Wait"
              : watchId !== "0"
                ? "Edit Floor"
                : "Add Floor"}
          </button>

        </div>
      </form>
    </AppFormProvider>
  );
};

export default FloorModel;