import { useForm } from "react-hook-form";
import { useCreateActivityGroup } from "../../../hooks/masterHook/useMaster";
import { zodResolver } from "@hookform/resolvers/zod";
import { ActivityGroupSchema } from "./ServicesSchema";
import Label from "../../common/Label";

const ManageGroup = ({ group = null, close }) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(ActivityGroupSchema),
    defaultValues: { name: "", description: "" },
  });
  const { mutate: createGroup, isPending } = useCreateActivityGroup();

  const onSubmit = (payload) => {
    console.log(payload);
    //  createGroup
  };
  return (
    <form className="row px-2" onSubmit={handleSubmit(onSubmit)}>
      <div className="col-12 col-md-12 text-start">
        <Label className="form-label" required>
          Group Name
        </Label>
        <input
          type="text"
          {...register("name")}
          className={`form-control form-control-sm ${errors.name ? "is-invalids" : ""}`}
        />
        {errors.name && <p className="danger-text m-0">{errors.name.message}</p>}
      </div>
      <div className="col-12 col-md-12 text-start mb-2">
        <Label className="form-label" htmlFor="description" required>
          Description
        </Label>
        <textarea
          rows="3"
          {...register("description")}
          className={`form-control form-control-sm ${errors.description ? "is-invalids" : ""}`}
        ></textarea>

        {errors.description && (
          <p className="danger-text m-0">{errors.description.message}</p>
        )}
      </div>

      <div className="col-12 text-end">
        <button
          className="btn btn-sm btn-label-secondary me-3"
          aria-label="Close"
          disabled={isPending}
          onClick={close}
        >
          Cancel
        </button>
        <button
          type="submit"
          className="btn btn-sm btn-primary"
          disabled={isPending}
        >
          {isPending ? "Please Wait..." : group ? "Update" : "Submit"}
        </button>
      </div>
    </form>
  );
};

export default ManageGroup;