import {
  FormControl,
  FormField,
  FormItem,
  FormMessage,
} from "@/shared/ui/form";
import React from "react";
import { useFormContext } from "react-hook-form";
import OTPInput from "react-otp-input";
import ResendTheCode from "../ResendCode/ResendCode";

export interface FormOtpProps {
  name: string;
  length?: number;
  inputType?: "number" | "text";
  onChange?: (value: string) => void;
  onPaste?: (value: string) => void;
  handleSendTime?: () => void;
  pinCodeValue: string;
  setPinCodeValue: (value: string) => void;
  time?: number;
}

const FormOtp: React.FC<FormOtpProps> = ({
  name,
  length = 4,
  inputType = "number",
  onChange,
  onPaste,
  pinCodeValue,
  setPinCodeValue,
  handleSendTime,
  time = 120,
}) => {
  const form = useFormContext();
  const {
    setValue,
    trigger,
    formState: { errors },
  } = form;

  const [availableResetCode, setAvailableResetCode] = React.useState(false);
  const [timerStarted, setTimerStarted] = React.useState(true);
  const placeholder = "-".repeat(length);
  return (
    <FormField
      control={form.control}
      name={name}
      render={({ field }) => (
        <FormItem>
          <FormControl>
            <div className="flex flex-col items-center gap-3">
              <OTPInput
                {...field}
                value={pinCodeValue}
                onChange={(value) => {
                  setPinCodeValue(value);
                  setValue(name, value);
                  onChange?.(value);
                  trigger(name);
                }}
                onPaste={(e: React.ClipboardEvent) => {
                  const pastedValue = e.clipboardData.getData("text");
                  setPinCodeValue(pastedValue);
                  setValue(name, pastedValue);
                  onPaste?.(pastedValue);
                  trigger(name);
                }}
                numInputs={length}
                inputStyle={{
                  borderColor:
                    errors[name] && +pinCodeValue.length < length
                      ? "#ef233c"
                      : "#F4F4F4",
                  backgroundColor: "transparent",
                  width: "55px",
                  height: "55px",
                  borderRadius: "12px",
                  borderWidth: "2px",
                }}
                containerStyle={{
                  display: "flex",
                  gap: "8px",
                  justifyContent: "center",
                }}
                shouldAutoFocus={true}
                inputType={inputType}
                placeholder={placeholder}
                renderInput={(props) => (
                  <input {...props} className="w-12 h-12" />
                )}
              />
              <FormMessage />
              <ResendTheCode
                action={() => {
                  handleSendTime?.();
                  setTimerStarted(true);
                  setAvailableResetCode(true);
                }}
                available={availableResetCode}
                timerStart={timerStarted}
                setAvailableResetCode={setAvailableResetCode}
                setTimerStarted={setTimerStarted}
                time={time}
              />
            </div>
          </FormControl>
        </FormItem>
      )}
    />
  );
};

export default FormOtp;