import React, { useEffect } from "react";
import { FormProvider, useForm } from "react-hook-form";
import {
  useCreateOrganization,
  useOrganizationModal,
  useUpdateOrganization,
} from "../../hooks/useOrganization";
import {
  defaultOrganizationValues,
  organizationSchema,
} from "./OrganizationSchema";
import Label from "../common/Label";
import { useGlobalServices } from "../../hooks/masterHook/useMaster";
import { zodResolver } from "@hookform/resolvers/zod";
import SelectMultiple from "../common/SelectMultiple";

const ManagOrg = () => {
  const { data: service, isLoading } = useGlobalServices();
  const { isOpen, orgData, startStep, onOpen, onClose, prevStep } =
    useOrganizationModal();

  const method = useForm({
    resolver: zodResolver(organizationSchema),
    defaultValues: defaultOrganizationValues,
  });

  const {
    handleSubmit,
    register,
    reset,
    formState: { errors },
  } = method;

  // Create & Update mutations
  const { mutate: createOrganization, isPending: isCreating } = useCreateOrganization(() => {
    reset(defaultOrganizationValues);
    onOpen({ startStep: 1 });
    onClose();
  });

  const { mutate: updateOrganization, isPending: isUpdating } = useUpdateOrganization(() => {
    reset(defaultOrganizationValues);
    onOpen({ startStep: 1 });
    onClose();
  });

  // Prefill form if editing
  useEffect(() => {
    if (orgData) {
      console.log(orgData)
      reset({
        name: orgData.name || "",
        contactPerson: orgData.contactPerson || "",
        contactNumber: orgData.contactNumber || "",
        email: orgData.email || "",
        serviceIds: orgData.services?.map(s => s.id) || [],
        address: orgData.address || "",
      });
    }
  }, [orgData, reset]);

  const onSubmit = (payload) => {
    if (orgData?.id) {
      updateOrganization({ id: orgData.id, ...payload });
    } else {
      createOrganization(payload);
    }
  };

  return (
    <FormProvider {...method}>
      <form className="form" onSubmit={handleSubmit(onSubmit)}>
        <div className="mb-1 text-start">
          <Label htmlFor="name" required>Organization Name</Label>
          <input className="form-control form-control-sm" {...register("name")} />
          {errors.name && <span className="danger-text">{errors.name.message}</span>}
        </div>

        <div className="mb-1 text-start">
          <Label htmlFor="contactPerson" required>Contact Person</Label>
          <input className="form-control form-control-sm" {...register("contactPerson")} />
          {errors.contactPerson && <span className="danger-text">{errors.contactPerson.message}</span>}
        </div>

        <div className="mb-1 text-start">
          <Label htmlFor="contactNumber" required>Contact Number</Label>
          <input className="form-control form-control-sm" {...register("contactNumber")} />
          {errors.contactNumber && <span className="danger-text">{errors.contactNumber.message}</span>}
        </div>

        <div className="mb-1 text-start">
          <Label htmlFor="email" required>Email Address</Label>
          <input className="form-control form-control-sm" {...register("email")} />
          {errors.email && <span className="danger-text">{errors.email.message}</span>}
        </div>

        <div className="mb-1 text-start">
          <SelectMultiple
            name="serviceIds"
            label="Services"
            required
            valueKey="id"
            options={service?.data || []}
          />
          {errors.serviceIds && <span className="danger-text">{errors.serviceIds.message}</span>}
        </div>

        <div className="mb-1 text-start">
          <Label htmlFor="address" required>Address</Label>
          <textarea
            className="form-control form-control-sm"
            {...register("address")}
            rows={2}
          />
          {errors.address && <span className="danger-text">{errors.address.message}</span>}
        </div>

        <div className="d-flex justify-content-between gap-2 my-2">
          <button
            type="button"
            className="btn btn-sm btn-outline-secondary"
            onClick={() => onOpen({ startStep: prevStep })}
          >
            ← --Back
          </button>
          <div>
            <button
              type="submit"
              className="btn btn-sm btn-primary"
              disabled={isCreating || isUpdating || isLoading}
            >
              {isCreating || isUpdating ? "Please Wait..." : orgData ? "Update" : "Submit"}
            </button>
          </div>
        </div>
      </form>
    </FormProvider>
  );
};


export default ManagOrg;