import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { bucketScheam } from "./DirectorySchema";
import { zodResolver } from "@hookform/resolvers/zod";
import Label from "../common/Label";

const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) => {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(bucketScheam),
    defaultValues: selectedBucket || { name: "", description: "" },
  });

  useEffect(() => {
    reset(selectedBucket || { name: "", description: "" });
  }, [selectedBucket, reset]);

  const isEditMode = mode === "edit";
  const isCreateMode = mode === "create";

  return (
    <div className="row">
      <div className="d-flex justify-content-between align-items-center">
        <i
          className="bx bx-left-arrow-alt bx-md cursor-pointer"
          onClick={onCancel}
        ></i>

        {/* Show edit toggle only for existing bucket in edit mode */}
        {/* {isEditMode && (
          <i className="bx bx-edit bx-sm text-primary cursor-pointer"></i>
        )} */}
      </div>

      {(isCreateMode || isEditMode) ? (
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="mb-3 mt-5">
            <Label htmlFor="Name" className="text-start" required>
              Name
            </Label>
            <input
              className="form-control form-control-sm"
              {...register("name")}
            />
            {errors.name && (
              <small className="danger-text">{errors.name.message}</small>
            )}
          </div>

          <div className="mb-3">
            <Label htmlFor="description" className="text-start" required>
              Description
            </Label>
            <textarea
              className="form-control form-control-sm"
              {...register("description")}
              rows="3"
            />
            {errors.description && (
              <small className="danger-text">{errors.description.message}</small>
            )}
          </div>

          <div className="mt-4 mb-3 d-flex gap-3 justify-content-end">
            <button
              type="button"
              className="btn btn-sm btn-label-secondary"
              onClick={onCancel}
              disabled={isPending}
            >
              Cancel
            </button>
            <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
              {isPending ? "Please Wait " : isEditMode ? "Update" : "Create"}
            </button>
          </div>
        </form>
      ) : (
        <dl className="row text-start my-2">
          <dt className="col-sm-2">Name</dt>
          <dd className="col-sm-10">{selectedBucket?.name || "-"}</dd>

          <dt className="col-sm-2">Description</dt>
          <dd className="col-sm-10">{selectedBucket?.description || "-"}</dd>
        </dl>
      )}
    </div>
  );
};

export default BucketForm;