import React, {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 { faGem } from "@fortawesome/free-solid-svg-icons";
import navigationContent from '../lib/navigationContent'
import Modal from 'react-modal';
const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  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?: any}>({
    name: '',
    url: '',
    content: ''
  });

  const renderNav = (navData: Array<{name: string, url: string, content: (string | React.ElementType | 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>
    ));
  };
  Modal.setAppElement('#info-anchor');

  return (
    <div id="info-anchor" className='relative w-full flex-row justify-center'>
      {!showModal && <div className='tablet:w-full h-full bg-cover'>
        {/* <Image src={backgroundPic} alt="record background"/> */}
        <div className='flex flex-col justify-center text-center'>
          {/* <FontAwesomeIcon width={25} height={50} icon={faGem} className="fas fa-gem" style={{ color: "red" }} /> */}
          <div className='w-full grid grid-row-4 justify-center h-1/2'>
            <div className='col-span-2 w-1/2 border-t-2 border-white border-r-2'></div>
            <div className='col-span-2 h-1/2 w-1/2 border-t-2 border-white border-l-2'></div>
          </div>
          <div className='flex flex-row justify-center'>
            {renderNav(navigationContent)}
          </div>
        </div>
      </div>}
      {showModal && (
        <div className=''>
          <div style={{height: '100vh'}} className="laptop:px-24 absolute z-10 p-10 bg-black bg-opacity-30  overflow-y-auto flex flex-row justify-center">
            <div className=" laptop:w-1/2 z-20 bg-black bg-opacity-90 text-white rounded">
              <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>
  )
}
