import { useState, useEffect, useRef } from 'react'
import img1 from '../assets/leihengblade.png'
import img2 from '../assets/slideshow-img.webp'
import img3 from '../assets/screenshot.png'
import img4 from '../assets/screenshot2.png'
import img5 from '../assets/screenshot3.png'
import img6 from '../assets/screenshot4.png'
import img7 from '../assets/revolver.png'
import img8 from '../assets/hero-bg.png'
import img9 from '../assets/root-img2.webp'
import img10 from '../assets/root-img3.png'
import img11 from '../assets/root-img4.png'
import img12 from '../assets/root-img5.png'
import imgRoot from '../assets/root-img.png'
import './Projects.css'

const projects = [
  { title: 'EIIFWHRN OpenGL Engine', imgs: [img8,img4,img11,img12], desc: 'C++ OpenGL engine containing a multitude of features, most prominently a physics engine, shadow mapping, and skeletal animations. Also loaded the bits of Bad Apple\s pixels into a file and loaded them as force onto a wave simulation rendered in the engine.', links: [{label:'Bad Apple as Wave Simulation',url: 'https://www.youtube.com/watch?v=dO0JZpU5cGg'},{ label: 'GitHub', url: 'https://github.com/johnruina/eiifwhrn-game-engine' }] },
  { title: 'Blender Shenanigans', imgs: [img1,img3,img7], desc: 'Small portion of the things I\'ve made in blender over the years.', links: [] },
  { title: 'Homelab', imgs: [img9,img10,img6], desc: 'Personal server, it sent you the information you\' reading right now. I host a multitude of things on it, including multiple websites, vpn tunnels, dns blocking, gitea, etc. Slightly personally modified the laptop, removed the screen, replaced the wificard and grafted a wifi antenna. Using Proxmox for virtualization and mostly using Ubuntu containers to run individual services.', links: [] },
  { title: 'English Operating System', imgs: [img2], desc: 'Created an amnesic operating system for my english final, features stuff like Wordle, Balatro, Mario, and some boring english games. Built and compiled using Rust.', links: [{ label: 'GitHub', url: 'https://git.johnruina.xyz/johnruina/engfinal' }] },
  { title: 'Ranked EQAO', imgs: [imgRoot], desc: 'Co-created a competitive gaming site where people compete to see who can finish EQAO the fastest.', links: [{ label: 'Link', url: 'https://ranked-eqao.xyz/' }] }
]

function Projects() {
  const [active, setActive] = useState(0)
  const [imgIdx, setImgIdx] = useState(0)
  const [visible, setVisible] = useState(true)
  const timer = useRef()
  const p = projects[active]

  useEffect(() => {
    setImgIdx(0)
  }, [active])

  function switchProject(i) {
    if (i === active) return
    setVisible(false)
    clearTimeout(timer.current)
    timer.current = setTimeout(() => {
      setActive(i)
      setVisible(true)
    }, 150)
  }

  return (
    <section className="section projects-page">
      <div className="container">
        <h2>Projects</h2>
        <div className="projects-layout">
          <div className="projects-list">
            {projects.map((proj, i) => (
              <button
                key={proj.title}
                className={`project-item${i === active ? ' active' : ''}`}
                onClick={() => switchProject(i)}
              >
                {proj.title}
              </button>
            ))}
          </div>
          <div>
            <div
              className={`projects-display${!visible ? ' fading' : ''}`}
            >
              <img src={p.imgs[imgIdx]} alt={p.title} className="projects-img" />
              {p.imgs.length > 1 && (
                <>
                  <button className="arrow arrow-left" onClick={() => setImgIdx((i) => (i - 1 + p.imgs.length) % p.imgs.length)}>&#8249;</button>
                  <button className="arrow arrow-right" onClick={() => setImgIdx((i) => (i + 1) % p.imgs.length)}>&#8250;</button>
                </>
              )}
              <div className="projects-links">
                {p.links.map((l) => (
                  <a key={l.label} href={l.url} target="_blank" rel="noreferrer">{l.label}</a>
                ))}
              </div>
              {p.imgs.length > 1 && (
                <div className="projects-dots">
                  {p.imgs.map((_, i) => (
                    <span key={i} className={`dot${i === imgIdx ? ' active' : ''}`} onClick={() => setImgIdx(i)} />
                  ))}
                </div>
              )}
            </div>
            <p className="projects-desc">{p.desc}</p>
          </div>
        </div>
      </div>
    </section>
  )
}

export default Projects
