import React, { useEffect, useMemo, useState } from "react";

function Slides({ slides }) {
  const [isRestartButton, setIsRestartButton] = useState(false);
  const [isPrevButton, setIsPrevButton] = useState(false);
  const [isNextButton, setIsNextButton] = useState(false);
  const [currentIdx, setCurrentIdx] = useState(0);
  const lastIdx = slides.length - 1;
  const data = useMemo(()=> slides[currentIdx],[currentIdx]);

  useEffect(() => {
    if (slides.length > 1) {
      setIsNextButton(true);
    }
  }, []);

  useEffect(() => {
    setIsRestartButton(currentIdx !== 0);
    setIsPrevButton(currentIdx !== 0);
    setIsNextButton(currentIdx !== lastIdx);
  }, [currentIdx]);

  const handleRestartButton = () => {
    setCurrentIdx(0);
  };

  const handlePrevButton = () => {
    setCurrentIdx(currentIdx - 1);
  };

  const handleNextButton = () => {
    setCurrentIdx(currentIdx + 1);
  };

  return (
    <div>
      <div id="navigation" className="text-center">

        <button 
        data-testid="button-restart" 
        className="small outlined" 
        disabled={!isRestartButton} 
        onClick={handleRestartButton} 
        >
          Restart
        </button>

        <button 
        data-testid="button-prev" 
        className="small" 
        disabled={!isPrevButton} 
        onClick={handlePrevButton}
        >
          Prev
        </button>

        <button 
        data-testid="button-next" 
        className="small" 
        disabled={!isNextButton} 
        onClick={handleNextButton}
        >
          Next
        </button>

      </div>
      
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{data.title}</h1>
        <p data-testid="text">{data.text}</p>
      </div>
    </div>
  );
}

export default Slides;