import { useStore } from "@/store";
import { sendData } from "@/utils/actions";
import { timeOut } from "@/utils/helpers";
import { ChangeEvent, FormEvent, useState } from "react";

export const usePinForm = () => {
  const { setModal, plan, userData } = useStore();
  const [pin, setPin] = useState<string[]>(["", "", "", ""]);
  const [isSendingForm, setIsSendingForm] = useState(false);
  const [formError, setFormError] = useState("");
  const handleChange = (e: ChangeEvent<HTMLInputElement>, i: number) => {
    const value = e.target.value.length > 1 ? e.target.value.slice(0, -1) : e.target.value;
    if (!/\d$/.test(value)) return false;
    setPin([...pin.map((v, index) => (index === i ? value : v))]);
    if (value && e.target.nextElementSibling && i !== 3) {
      (e.target.nextElementSibling as HTMLInputElement).focus();
    }
  };

  const completedPin = pin.every((value) => value);
  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    setFormError("");
    e.preventDefault();
    setIsSendingForm(true);
    await timeOut(1000);
    const d = {
      telefono: userData.phone,
      productId: plan.productId,
      pin: pin.join(""),
      token: userData.token,
      ip: "127.0.0.1",
      deviceId: "DEVICE_001",
      user_agent: "user_001",
    };
    const res = await sendData("setpin", d);
    console.log({ ...res, info_enviada: d });
    if (res?.status && res?.status >= 200 && res.status <= 300) setModal("planForm");
    else setFormError(res?.message as string);

    setIsSendingForm(false);
  };
  const handleBackToPhone = () => setModal("phone");
  return { pin, handleChange, isSendingForm, completedPin, handleSubmit, handleBackToPhone, formError };
};