import { useState, useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';

import api from '../../hooks/api';
import Navbar from '../../components/navbar';


export default function VerifyEmail() {
  const [cachedEmail, setCachedEmail] = useState(null);
  const [cachedPhoneNumber, setCachedPhoneNumber] = useState(null);

  useEffect(() => {
    function sendVerificationCode() {
      api.post('send-email-verification-code');
    };

    try {
      const email = window.localStorage.getItem('emailAddress');
      const phone = window.localStorage.getItem('phoneNumber');

      setCachedEmail(email);
      setCachedPhoneNumber(phone);
    } catch (err) {
      console.error(err);
    };

    document.getElementById('code-text').innerText = 'Sending a verification code to your email. Please Wait'

    setTimeout(() => {
      sendVerificationCode();

      document.getElementById('code-text').innerText = 'A verification code was sent to your email. Enter that code below.';
    }, 3000);
  }, []);

  const [postData, setPostData] = useState({
    code: ''
  });

  const [step, setStep] = useState(0);

  const [isError, setIsError] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);

  const [errorText, setErrorText] = useState('');
  const [successText, setSuccessText] = useState('');

  const navigate = useNavigate('');

  const handleChange = async (e) => {
    const { name, value } = e.target;

    setPostData({
      ...postData,
      [name]: value,
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (step === 0) {
      const submitCodeResponse = await api.post('/auth/verify-email-code', postData);

      if (submitCodeResponse.status === 200) {
        setSuccessText('Code Confirmed Successfully. Please Wait.');
        setIsSuccess(true);

        setTimeout(() => {
          setPostData('');
          setStep(1);
        }, 3000);
      } else {
        setErrorText(submitCodeResponse.data.message);
        setIsError(true);

        setTimeout(() => {
          setIsError(false);
          return setErrorText('');
        }, 5000);
      }
    } else {
      const submitCodeResponse = await api.post('/auth/verify-phone-code', postData);

      if (submitCodeResponse.status === 200) {
        setSuccessText('Code Confirmed Successfully. Please Wait.');
        setIsSuccess(true);

        setTimeout(() => {
          setPostData('');
          return navigate('/auth/login');
        }, 3000);
      } else {
        setErrorText(submitCodeResponse.data.message);
        setIsError(true);

        setTimeout(() => {
          setIsError(false);
          return setErrorText('');
        }, 5000);
      };
    };
  };

  if (step === 0) {
    return (
      <div className="flex flex-row items-center justify-center w-full h-[850px]">
        <Navbar props={{ loggedIn: false }} />

        <div className="flex flex-col items-center justify-start w-full h-full ml-5 mt-10">
          <div className="flex flex-col items-center justify-center w-full p-2"></div>

          <form
            onSubmit={handleSubmit}
            className="flex flex-col items-center justify-start w-[70%] h-[700px]">

              <div className="flex flex-col items-center justify-evenly w-full h-full border-2 border-bdr rounded-xl boxShadow">
                <label
                  htmlFor="code"
                  id="code-text"
                  className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">

                </label>

                <input
                  type="text"
                  id="code"
                  name="code"
                  value={postData.code}
                  onChange={handleChange}
                  required
                  className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[50%] h-[50px] bg-gray-600 border-2 border-bdr rounded-lg outline-none hover:outline-none hover:bg-hvr hover:text-black focus:bg-bg focus:text-fg transition-all-delay-150" />
              </div>

              <div className="flex flex-col items-center justify-center w-[80%] m-5 p-2">
                {isError && (<div className="bg-red-600 text-black text-center border-2 border-black rounded-full p-2 w-[60%]">{errorText}</div>)}
                {isSuccess && (<div className="bg-green-600 text-black text-center border-2 border-black rounded-full p-2 w-[60%]">{successText}</div>)}
              </div>

              <div className="flex flex-row items-center justify-evenly w-full">
                <Link
                  to="/"
                  className="font-inkfree italic text-xl text-fg text-center tracking-widest border-2 border-bdr rounded-full w-[300px] h-[40px] outline-none hover:outline-none hover:bg-hvr hover:text-black hover:text-bold hover:scale-110 hover:text-2xl focus:outline-none transition-all delay-150 pt-1">

                  Cancel
                </Link>

                <button
                  type="submit"
                  className="font-inkfree italic text-xl text-fg text-center tracking-widest border-2 border-bdr rounded-full w-[300px] h-[40px] outline-none hover:outline-none hover:bg-hvr hover:text-black hover:text-bold hover:scale-110 hover:text-2xl focus:outline-none transition-all delay-150">

                  Verify Code
                </button>
              </div>
          </form>
        </div>
      </div>
    );
  } else {
    return (
      <div className="flex flex-row items-center justify-center w-full h-[850px]">
        <Navbar props={{ loggedIn: false }} />

        <div className="flex flex-col items-center justify-start w-full h-full ml-5 mt-10">
          <div className="flex flex-col items-center justify-center w-full p-2"></div>

          <form
            className="flex flex-col items-center justify-start w-[70%] h-[700px]">

              <div className="flex flex-col items-center justify-evenly w-full h-full border-2 border-bdr rounded-xl boxShadow"></div>

              <div className="flex flex-col items-center justify-center w-[80%] m-5 p-2">
                {isError && (<div className="bg-red-600 text-black text-center border-2 border-black rounded-full p-2 w-[60%]">{errorText}</div>)}
                {isSuccess && (<div className="bg-green-600 text-black text-center border-2 border-black rounded-full p-2 w-[60%]">{successText}</div>)}
              </div>

              <div className="flex flex-row items-center justify-evenly w-full">
                <Link
                  to="/"
                  className="font-inkfree italic text-xl text-fg text-center tracking-widest border-2 border-bdr rounded-full w-[300px] h-[40px] outline-none hover:outline-none hover:bg-hvr hover:text-black hover:text-bold hover:scale-110 hover:text-2xl focus:outline-none transition-all delay-150 pt-1">

                  Cancel
                </Link>

                <button
                  type="submit"
                  className="font-inkfree italic text-xl text-fg text-center tracking-widest border-2 border-bdr rounded-full w-[300px] h-[40px] outline-none hover:outline-none hover:bg-hvr hover:text-black hover:text-bold hover:scale-110 hover:text-2xl focus:outline-none transition-all delay-150">

                  Sign Up
                </button>
              </div>
          </form>
        </div>
      </div>
    );
  };

};