import React, {useRef, useState} from 'react'
import Image from 'next/image'
import backgroundPic from '../public/unspash_image.jpg'
import { Inter } from 'next/font/google'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronCircleUp } from "@fortawesome/free-solid-svg-icons";
import navigationContent from '../lib/navigationContent'
import ContactForm from '@/components/form/ContactForm';
import Footer from '@/components/footer';
import Link from 'next/link';
const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  const contactFormSectionRef = useRef<HTMLDivElement>(null);
  const landingSectionRef = useRef<HTMLDivElement>(null);
  const [contactClicked, setContactClicked] = useState(false);

  const customStyles = {
    overlay: {
       backgroundColor: 'rgba(0, 0, 0, 0.6)'
    },
    content: {
       top: '50%',
       left: '50%',
       right: 'auto',
       bottom: 'auto',
       marginRight: '-50%',
       transform: 'translate(-50%, -50%)',
       backgroundColor: 'gray',
       width: '75vw'
    }
 }

  const [showModal, setShowModal] = useState(false);
  const [modalData, setModalData] = useState<{name: string, url: string, content?: string | React.JSX.Element | null}>({
    name: '',
    url: '',
    content: ''
  });

  const renderNav = (navData: Array<{name: string, url: string, content: (string | React.JSX.Element | null)}>) => {
    
    return navData.map((data, idx) => (
      <span 
        onClick={() => {
          setShowModal(true);
          setModalData(data);
        }}
        key={idx}
         className='p-4 border-white text-white border-2 hover:cursor-pointer hover:bg-white hover:bg-opacity-10'
      >
        <a href={data.url}>{data.name}</a>
      </span>
    )).concat([
      <span 
          onClick={async () => {
            setContactClicked(true);
            setTimeout(() => {
              executeScrollToContact();
            }, 10);
          }}
          key={navData.length}
          className='p-4 border-white text-white border-2 hover:cursor-pointer hover:bg-white hover:bg-opacity-10'
        >
          <span>CONTACT</span>
        </span>
    ]);
  };

  const executeScrollToContact = () => contactFormSectionRef.current?.scrollIntoView({behavior: 'smooth'});
  const executeScrollToLandiing = () => landingSectionRef.current?.scrollIntoView({behavior: 'smooth'});

  return (
    <div className='relative h-full w-full flex-row justify-center'>
      <div id="landing-section" ref={landingSectionRef} className='h-full w-full'>
        {!showModal && <div className='tablet:w-full flex flex-row justify-center h-full bg-cover bg-black bg-opacity-30'>
          {/* <Image src={backgroundPic} alt="record background"/> */}
          <div className='w-1/2 flex flex-col justify-center text-center'>
            <div className="py-20 flex flex-col text-white border-white border-y-2 border-solid">
              <div className='text-2xl'><h2>Okechi Onyeje</h2></div>
              <div className='flex flex-row justify-center space-x-2'>
                <span>Software Professional</span>
                <span>|</span>
                <span>
                  Application Artisan
                </span>
                <span>|</span>
                <span>
                  Creative & Technology Evangilist
                </span>
              </div>
            </div>
            <div className='flex flex-row justify-center'>
              <div className='flex flex-col'>
                <div className='flex flex-row'>
                  {renderNav(navigationContent)}
                </div>
              </div>
            </div>
          </div>
        </div>}
        {showModal && (
          <div className='justify-center flex flex-row bg-black bg-opacity-40'>
            <div className="h-full w-full laptop:px-24 absolute z-10 p-10 overflow-y-auto">
              <div className='flex flex-row justify-center'>
                <div className=" h-max w-3/4 z-20 bg-black bg-opacity-90 text-white rounded overflow-clip">
                  <div className="w-full flex flex-row justify-end p-4">
                    <span className="cursor-pointer" onClick={() => setShowModal(false)}>X</span>
                  </div>
                  {modalData.content}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
      {contactClicked && <div id='contact-form-section' ref={contactFormSectionRef} className='h-screen bg-black'>
        <div className='h-full'>
          <div className='flex flex-row h-full w-full justify-center'>
            <div className='flex flex-col h-full w-full justify-center'>
              <ContactForm/>
            </div>
            <span className="cursor-pointer self-end" onClick={() => {
              executeScrollToLandiing();
              setTimeout(() => {
                setContactClicked(false);
              }, 10);
            }}>
                <FontAwesomeIcon width={25} height={200} icon={faChevronCircleUp} className="fas fa-chevron-circle-up" style={{ color: "white" }} />
            </span>
          </div>
        </div>

      </div>}
    </div>
  )
}