import InputField from "./InputField";
import PlaceAutocomplete from "../components/PlaceAutocomplete";
import { useLanguage } from "@/app/context/LanguageContext";

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

export default function StepTwo({
  register,
  errors,
  watch,
  setValue,
  nextStep,
  prevStep,
}: Props) {
  const { t } = useLanguage();
  return (
    <>
      <InputField
        label={t("auth.registerStepTwo.addressLabel", "Address")}
        name="addressLine1"
        register={register}
        rules={{
          required: t("auth.registerStepTwo.addressRequired", "Address is required"),
        }}
        error={errors.addressLine1}
      />

      <PlaceAutocomplete
        label={t("auth.registerStepTwo.locationLabel", "City, State, Country")}
        placeholder={t("auth.registerStepTwo.locationPlaceholder", "Search City")}
        value={watch("location")}
        onChange={(value) =>
          setValue("location", value, {
            shouldValidate: true,
            shouldDirty: true,
            shouldTouch: true,
          })
        }
        onSelect={(details) => {
          if (details.pincode) {
            setValue("pincode", details.pincode, {
              shouldValidate: true,
              shouldDirty: true,
              shouldTouch: true,
            });
          }
        }}
        error={errors.location}
      />

      <InputField
        label={t("auth.registerStepTwo.pincodeLabel", "Pincode")}
        name="pincode"
        type="text"
        inputMode="numeric"
        maxLength={6}
        register={register}
        rules={{
          required: t("auth.registerStepTwo.pincodeRequired", "Pincode is required"),
          pattern: {
            value: /^[0-9]{6}$/,
            message: t("auth.registerStepTwo.pincodeInvalid", "Enter a valid 6-digit pincode"),
          },
        }}
        error={errors.pincode}
      />

      <div className="mt-4 d-flex gap-3">
        <button
          type="button"
          className="btn btn-outline-light py-3 w-50 d-flex gap-2 justify-content-center align-items-center"
          onClick={prevStep}
        >
          <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.8731 8.24994H15V6.74998H2.8731L8.56924 1.05382L7.50004 0L0.0001 7.49996L7.50004 14.9999L8.56924 13.9461L2.8731 8.24994Z" fill="#fff"/>
          </svg>
          {t("auth.registerStepTwo.back", "Back")}
        </button>

        <button
          type="button"
          className="btn btn-primary py-3 w-50 d-flex gap-2 justify-content-center align-items-center"
          onClick={nextStep}
        >
          {t("auth.registerStepTwo.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>
      </div>
    </>
  );
}