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

function Slides({ slides }) {
  const [index, setIndex] = useState(0);
  const [disableRestart, setDisableRestart] = useState(true);
  const [disableNext, setDisableNext] = useState(false);
  const [disablePrev, setDisablePrev] = useState(true);

  const slidesLength = slides?.length - 1;

  const slideTitle = slides?.[index]?.title;
  const slideText = slides?.[index]?.text;

 useEffect(() => {
  setDisableRestart(index === 0);
  setDisablePrev(index === 0);
  setDisableNext(index === slidesLength);
}, [index, slidesLength]);


  const handleRestart = () => {
    if (index > 0) {
      setIndex(0)
    }
  }

  const handleNextSlide = () => {
    if (index < slidesLength) {
      setIndex(prev => prev + 1)
    }
  }

  const handlePrevSlide = () => {
    if (index <= slidesLength && index !== 0) {
      setIndex(prev => prev - 1)
    }
  }

  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" onClick={() => handleRestart()} disabled={disableRestart}>
          Restart
        </button>
        <button data-testid="button-prev" className="small" onClick={() => handlePrevSlide()} disabled={disablePrev}>
          Prev
        </button>
        <button data-testid="button-next" className="small" onClick={() => handleNextSlide()} disabled={disableNext}>
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{slideTitle}</h1>
        <p data-testid="text">{slideText}</p>
      </div>
    </div>
  );
}

export default Slides;