"use client";

import Input from "../input";
import { ChangeEvent } from "react";
import { cn } from "clsx-tailwind-merge";
import { usePhoneForm } from "@/hooks/usePhoneForm";
import { AnimatePresence, motion } from "framer-motion";
import { fadeInOut } from "@/utils/variants";
import SubmitBtn from "../submit-btn";
import FormErrorMessage from "../form-error-message";

const TelModalTelForm = () => {
  const { handleSubmit, onSubmit, register, errors, setValue, isSendingForm, formError } = usePhoneForm();

  return (
    <motion.div {...fadeInOut()} className="space-y-6">
      <p>Ingresa tu teléfono Movistar, te enviaremos un pin de confirmación</p>
      <form
        className={`${cn("max-w-[23.4375rem] mx-auto", { "opacity-30 pointer-events-none": isSendingForm })}`}
        onSubmit={handleSubmit(onSubmit)}
      >
        <Input
          label="Teléfono"
          name="telefono"
          register={register}
          attr={{ type: "text", placeholder: "Ej: 912345678 (9 Dígitos)", maxLength: 9, autoComplete: "off" }}
          errors={errors}
          registerOptions={{
            onChange: (e: ChangeEvent<HTMLInputElement>) =>
              setValue("telefono", !/\d$/.test(e.target.value) ? e.target.value.slice(0, -1) : e.target.value, {
                shouldDirty: true,
              }),
          }}
        />
        <SubmitBtn isSendingForm={isSendingForm} className="btnSubscribe" />
      </form>
      <AnimatePresence>{formError && <FormErrorMessage message={formError} />}</AnimatePresence>
    </motion.div>
  );
};

export default TelModalTelForm;