/** REACT / INERTIA */
import React, { FormEvent } from "react";
import { usePage } from "@inertiajs/react";
/** LUCIDE */
import { InfoIcon } from "lucide-react";
/** SHADCN */
import { Button } from "@/components/ui/button";
/** BASE */
import { useRecaptcha } from "@/front/providers/RecaptchaProvider";
import InputError from "$/base/InputError";
import useTrans from "@/hooks/use-translations";
import { cn } from "@/lib/utils";

interface CustomData {
  "g-recaptcha-response"?: string;
}

type BannerClassName = {
  classNames?: {
    wrapperClassName?: string;
    btnClassName?: string;
  };
};

type Props<TFormData> = {
  /* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
  onSubmit: (e: FormEvent<HTMLFormElement>) => void;
  data: TFormData & CustomData;
  children: React.ReactNode;
  footer?: React.ReactNode;
  banner?: BannerClassName;
  classNames?: {
    wrapperClassName?: string;
    formClassName?: string;
  };
};

function RecaptchaNotice({ banner }: { banner?: BannerClassName }) {
  const { enabled } = useRecaptcha();

  const title = useTrans("cookie-notice.custom.recaptcha.title");
  const warning = useTrans("cookie-notice.custom.recaptcha.warning");
  const label = useTrans("cookie-notice.custom.recaptcha.accept");

  const handleAccept = () => {
    // @ts-expect-error External library
    window.WebCookieNotice?.acceptCookie("recaptcha");
  };

  if (enabled) return null;

  return (
    <div
      data-cookie-name="recaptcha"
      className={cn(
        "cn-cookie-activate flex flex-col rounded-lg border border-destructive/50 bg-card text-card-foreground shadow-sm gap-4 mb-4 p-6",
        banner?.classNames?.wrapperClassName,
      )}
    >
      <p className="text-2xl font-semibold leading-none tracking-tight flex flex-row w-full items-start">
        <InfoIcon className="mr-1" />
        {title}
      </p>
      <div className="flex flex-row justify-between items-center">
        <small className="text-success fw-normal fs-5">{warning}</small>
        <Button
          className={cn(banner?.classNames?.btnClassName)}
          id="recaptcha-accept"
          type="button"
          onClick={handleAccept}
        >
          {label}
        </Button>
      </div>
    </div>
  );
}

export default function RecaptchaForm<TFormData>({
  onSubmit,
  classNames,
  banner,
  data,
  children,
  footer,
}: Props<TFormData>) {
  const { getToken, formRef, enabled } = useRecaptcha();
  const { errors } = usePage().props;
  const recaptchaKey = usePage().props.recaptchaKey as string;
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!enabled) return;
    const token = getToken();
    // eslint-disable-next-line no-param-reassign
    data["g-recaptcha-response"] = token;
    onSubmit(e);
  };

  return (
    <div className={cn(classNames?.wrapperClassName)}>
      <RecaptchaNotice banner={banner} />
      <form
        className={cn(classNames?.formClassName)}
        ref={formRef}
        onSubmit={handleSubmit}
        data-recaptcha-key={recaptchaKey}
        inert={!enabled}
      >
        {children}
        {enabled && (
          <>
            <InputError message={errors["g-recaptcha-response"]} />
            <div className="r_captcha flex justify-center mt-8" />
          </>
        )}
        {footer}
      </form>
    </div>
  );
}