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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
      <div className="mb-3">
        <label htmlFor="bucketName" className="form-label">Bucket Name</label>
        <input id="bucketName" 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="bucketDescription" className="form-label">Bucket Description</label>
        <textarea id="bucketDescription" className="form-control form-control-sm" rows="3" {...register("description")} />
        {errors.description && <small className="danger-text">{errors.description.message}</small>}
      </div>

      <div className="mt-4 d-flex justify-content-center gap-3">
        <button type="button" onClick={onCancel} className="btn btn-sm btn-secondary" disabled={isSubmitting}>Cancel</button>
        <button type="submit" className="btn btn-sm btn-primary" disabled={isSubmitting}>
          {isSubmitting ? "Please wait..." : "Submit"}
        </button>
      </div>
    </form>
  );
};

export default BucketForm;