import { useEffect, useState } from "react";
import { io } from "socket.io-client";
import "./App.css";

const socket = io();

export default function App() {
  const [slides, setSlides] = useState([]);
  const [currentSlide, setCurrentSlide] = useState(0);
  const [previousSlide, setPreviousSlide] = useState(null);
  const [mode, setMode] = useState("on");

  useEffect(() => {
    socket.on("slideshow:state", (state) => {
      setSlides(state.slides || []);
      setMode(state.mode ?? "on");

      setCurrentSlide((oldSlide) => {
        if (oldSlide !== state.currentSlide) {
          setPreviousSlide(oldSlide);
        }

        return state.currentSlide;
      });

      setTimeout(() => {
        setPreviousSlide(null);
      }, 1100);
    });

    return () => {
      socket.off("slideshow:state");
    };
  }, []);

  if (mode === "off") {
    return <div className="blank-screen" />;
  }

  const currentImage = slides[currentSlide];
  const previousImage =
    previousSlide !== null ? slides[previousSlide] : null;

  if (!currentImage) {
    return <div className="empty">No slides loaded</div>;
  }

  return (
    <div className="slideshow">
      {previousImage && (
        <img
          key={`previous-${previousImage}`}
          className="slide previous"
          src={previousImage}
          alt=""
        />
      )}

      <img
        key={`current-${currentImage}`}
        className="slide current"
        src={currentImage}
        alt=""
      />
    </div>
  );
}