import React, { useState, useRef } from "react";
import axios from "axios"
import Swal from "sweetalert2";
import Loader from "../helpers/Loader";
import Cookies from "js-cookie";
import { useRouter } from "next/router";
import { useSelector } from "react-redux";
import { RootState } from "@/Redux/store";
import { userActivity } from "../commonFunctions/userActivity";

interface OTPInputProps {
  length?: number;
  usernumber : string
}

interface ErrorResponse {
  response: {
    data: {
      message: string;
    };
  };
}

const OTPInput: React.FC<OTPInputProps> = (props) => {

  const router = useRouter();

  const [otp1, setOtp1] = useState("");
  const [otp2, setOtp2] = useState("");
  const [otp3, setOtp3] = useState("");
  const [otp4, setOtp4] = useState("");

  const [finalOtp, setfinalOtp] = useState("");

  const [userNumber, setuserNumber] = useState(props.usernumber);
  const [loading,setLoading] = useState(false)

  const [mergeStatus,setMergeStatus] = useState(false)

  const _loggedIn_user = useSelector((state: RootState) => state.user.user);

  const handleChange = (index: number, value: string) => {
    if (index === 1) {
      setOtp1(value);
      if (value.length === 1) {
        otp2Ref?.current?.focus();
      }
    } else if (index === 2) {
      setOtp2(value);
      if (value.length === 1) {
        otp3Ref?.current?.focus();
      } else {
        otp1Ref?.current?.focus();
      }
    } else if (index === 3) {
      setOtp3(value);
      if (value.length === 1) {
        otp4Ref?.current?.focus();
      } else {
        otp2Ref?.current?.focus();
      }
    } else if (index === 4) {
      setOtp4(value);
      if (value.length === 0) {
        otp3Ref?.current?.focus();
      }
    }
  };


  React.useEffect(() => {
    if (finalOtp !== '' && otp1 !== '' && otp2 !== '' && otp3 !== '' && otp4 !== '') {
      handleSubmit();
    }
  }, [finalOtp, otp1, otp2, otp3, otp4]);

  React.useEffect(() => {
    setfinalOtp(otp1 + otp2 + otp3 + otp4);
  }, [otp1, otp2, otp3, otp4]);

  React.useEffect(() => {
    setMergeStatus(Boolean(router.query.merge))
  }, [router.query]);

  const otp1Ref = useRef<HTMLInputElement>(null);
  const otp2Ref = useRef<HTMLInputElement>(null);
  const otp3Ref = useRef<HTMLInputElement>(null);
  const otp4Ref = useRef<HTMLInputElement>(null);


  const handleOtpMessage = (icon:any,title:any) => {
    const Toast = Swal.mixin({
      toast: true,
      position: 'bottom-end',
      showConfirmButton: false,
      timer: 5000,
      timerProgressBar: true,
      didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer);
        toast.addEventListener('mouseleave', Swal.resumeTimer);
      }
    });

    Toast.fire({
      icon: icon,
      title: title
    });
  };


  const handleSubmit = async () => {
    setLoading(true)
    // event.preventDefault();
    let data ;
    let url ;
    if(router.query.merge && router.query.ph){
      data = {
        phone: router.query.ph,
        otpCode: finalOtp
      };
      const token = Cookies.get("jazz_token");
      const config = {
        headers: {
          authorization: `Bearer ${token}`,
        },
      };
      url = 'https://api.jazzagain.com/public/index.php/api/user/socialOtpVerification'
      try {
        const response = await axios.post(url, data , config);
        const expirationTimeInMonths = 1;
        const now = new Date();
        now.setMonth(now.getMonth() + expirationTimeInMonths);
        Cookies.set("jazz_token", response.data.access_token, { 
          expires: now ,
        });
        setLoading(false)
        handleOtpMessage('success',response.data.message)
        window.location.href= '/'
      } catch (error) {
        const typedError = error as ErrorResponse;
        handleOtpMessage('error',typedError.response.data.message)
        setOtp1('')
        setOtp2('')
        setOtp3('')
        setOtp4('')
        setLoading(false);
      }
    }else{
      data = {
        phone: userNumber,
        otpCode: finalOtp
      };
      url = 'https://api.jazzagain.com/public/index.php/api/auth/otpVerify'
      try {
        const response = await axios.post(url, data);
        const expirationTimeInMonths = 1;
        const now = new Date();
        now.setMonth(now.getMonth() + expirationTimeInMonths);
        Cookies.set("jazz_token", response.data.access_token, { 
          expires: now ,
        });
        setLoading(false)
        handleOtpMessage('success',response.data.message)
        userActivity(_loggedIn_user?._id,'website','otp verify page',{
          pageVisit:`homepage`,
          userLogin:'Completed'
        }, navigator.userAgent)
        window.location.href= '/'
      } catch (error) {
        const typedError = error as ErrorResponse;
        handleOtpMessage('error',typedError.response.data.message)
        setOtp1('')
        setOtp2('')
        setOtp3('')
        setOtp4('')
        setLoading(false);
      }
    }
  };

  return (
    loading ? <Loader/> :
    <div className="flex justify-center items-center h-full my-4">
      <input
        className="w-10 h-10 text-xl text-center border border-gray-300 rounded-md mr-2"
        type="number"
        maxLength={1}
        value={otp1}
        onChange={(e) => handleChange(1, e.target.value)}
        ref={otp1Ref}
        autoFocus
      />
      <input
        className="w-10 h-10 text-xl text-center border border-gray-300 rounded-md mr-2"
        type="number"
        maxLength={1}
        value={otp2}
        onChange={(e) => handleChange(2, e.target.value)}
        ref={otp2Ref}
      />
      <input
        className="w-10 h-10 text-xl text-center border border-gray-300 rounded-md mr-2"
        type="number"
        maxLength={1}
        value={otp3}
        onChange={(e) => handleChange(3, e.target.value)}
        ref={otp3Ref}
      />
      <input
        className="w-10 h-10 text-xl text-center border border-gray-300 rounded-md mr-2"
        type="number"
        maxLength={1}
        value={otp4}
        onChange={(e) => handleChange(4, e.target.value)}
        ref={otp4Ref}
      />
    </div>
  );
};
export default OTPInput;