import InputField from "./InputField";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import GenderSelector from "./GenderSelector";
import { useLanguage } from "@/app/context/LanguageContext";

interface Props {
  register: any;
  errors: any;
  watch: any;
  setValue: any;
  nextStep: () => void;
}

export default function StepOne({
  register,
  errors,
  watch,
  setValue,
  nextStep,
}: Props) {
  const { t } = useLanguage();

  return (
    <>

      <InputField
        label={t("auth.registerStepOne.nameLabel", "Full Name")}
        name="name"
        register={register}
        error={errors.name}
      />

      <InputField
        label={t("auth.registerStepOne.emailLabel", "Email Address")}
        name="email"
        register={register}
        error={errors.email}
      />
      <div className="mt-3">

        <label className="form-label">
          {t("auth.registerStepOne.phoneLabel", "Phone Number")}
        </label>

        <PhoneInput
          country="in"
          value={watch("contactNo")}
          onChange={(value, country: any) => {
            setValue("contactNo", value, {
              shouldValidate: true,
              shouldDirty: true,
            });

            setValue("countryCode", country.dialCode, {
              shouldDirty: true,
            });
          }}
          inputClass={`phone-react-input ${
            errors.contactNo ? "is-invalid" : ""
          }`}
          buttonClass="phone-react-btn"
        />

        {errors.contactNo && (
          <div className="invalid-feedback">
            {errors.contactNo.message}
          </div>
        )}

      </div>

      <div className="my-3">

        <label className="form-label">
          {t("auth.registerStepOne.genderLabel", "Gender Identity")}
        </label>

        <GenderSelector
          value={watch("gender")}
          onChange={(value) =>
            setValue("gender", value)
          }
        />

      </div>

      <button
        type="button"
        className="btn btn-primary py-3 w-100 d-flex gap-2 justify-content-center align-items-center"
        onClick={nextStep}
      >
        {t("auth.registerStepOne.next", "Next")}
        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.1269 8.24994H0V6.74998H12.1269L6.43076 1.05382L7.49996 0L14.9999 7.49996L7.49996 14.9999L6.43076 13.9461L12.1269 8.24994Z" fill="#120500"/>
          </svg>
      </button>

    </>
  );
}