"use client";

import { forwardRef, useImperativeHandle, useRef } from "react";
import ReCAPTCHA from "react-google-recaptcha";

import config from "@/utils/config";
export type RecaptchaFieldHandle = {
  reset: () => void;
};

type RecaptchaFieldProps = {
  onVerifiedChange: (verified: boolean) => void;
};

const RecaptchaField = forwardRef<RecaptchaFieldHandle, RecaptchaFieldProps>(
  ({ onVerifiedChange }, ref) => {
    const recaptchaRef = useRef<ReCAPTCHA>(null);

    useImperativeHandle(ref, () => ({
      reset: () => {
        recaptchaRef.current?.reset();
        onVerifiedChange(false);
      },
    }));

    if (!config.ENV_VARS.RECAPTCHA_SITEKEY) {
      return (
        <div className="text-warning small mb-2">
          reCAPTCHA site key not configured.
        </div>
      );
    }

    return (
      <ReCAPTCHA
        ref={recaptchaRef}
        sitekey={config.ENV_VARS.RECAPTCHA_SITEKEY}
        onChange={(token) => onVerifiedChange(!!token)}
        onExpired={() => onVerifiedChange(false)}
      />
    );
  },
);

RecaptchaField.displayName = "RecaptchaField";

export default RecaptchaField;