import React from "react";
import Label from "../common/Label";
import { useFormContext } from "react-hook-form";

const ContactInfro = ({ onNext }) => {
  const {
    register,
    control,
    trigger,
    formState: { errors },
  } = useFormContext();


  const handleNext = async () => {
    const valid = await trigger([
      "firstName",
      "lastName",
      "email",
      "contactNumber",
      "billingAddress",
    ]);
    if (valid) {
      onNext(); // go to next tab
    }
  };
  return (
    <div class="row g-6">
      <div className="col-sm-6">
        <Label htmlFor="firstName" required>
          First Name
        </Label>
        <input
          id="firstName"
          type="text"
          className={`form-control form-control-sm ${errors.firstName ? "is-invalid" : ""}`}
          {...register("firstName")}
        />
        {errors.firstName && (
          <div className="invalid-feedback">{errors.firstName.message}</div>
        )}
      </div>
      <div className="col-sm-6">
        <Label htmlFor="lastName" required>
          Last Name
        </Label>
        <input
          id="lastName"
          type="text"
          className={`form-control form-control-sm ${errors.lastName ? "is-invalid" : ""}`}
          {...register("lastName")}
        />
        {errors.lastName && (
          <div className="invalid-feedback">{errors.lastName.message}</div>
        )}
      </div>
      <div className="col-sm-6">
          <Label htmlFor="email" required>
          Email
        </Label>
        <input
          id="email"
          type="email"
          className={`form-control form-control-sm ${errors.email ? "is-invalid" : ""}`}
          {...register("email")}
        />
        {errors.email && (
          <div className="invalid-feedback">{errors.email.message}</div>
        )}
      </div>
         <div className="col-sm-6">
         <Label htmlFor="contactNumber" required>
          Contact Number
        </Label>
        <input
          id="contactNumber"
          type="text"
          className={`form-control form-control-sm ${errors.contactNumber ? "is-invalid" : ""}`}
          {...register("contactNumber")}
        />
        {errors.contactNumber && (
          <div className="invalid-feedback">{errors.contactNumber.message}</div>
        )}
      </div>
       <div className="col-12">
        <Label htmlFor="billingAddress" required>
          Billing Address
        </Label>
        <textarea
          id="billingAddress"
          className={`form-control  ${errors.billingAddress ? "is-invalid" : ""}`}
          {...register("billingAddress")}
          rows={3}
        />
        {errors.billingAddress && (
          <div className="invalid-feedback">{errors.billingAddress.message}</div>
        )}
       </div>
          <div className="d-flex justify-content-end mt-3">
        <button type="button" className="btn btn-primary" onClick={handleNext}>
          Next
        </button>
      </div>
    </div>
  );
};

export default ContactInfro;