import React, { useState, useEffect }  from "react";
import { Spinner, Row, Col, Button } from "react-bootstrap";

//Videos function that handles the content of Videos
function Videos() {
  const [isLoading, setLoading] = useState(true);
  const [videos, setVideos] = useState([]);
  const [currentVideoIndex, setCurrentVideoIndex] = useState(0);

  //Create const that gets YouTube Api data and build video links from data
  const getYTVideoLink = async () => {
    try {
      const response = await fetch("https://express-api-neinhills.onrender.com/youtube");
      const json = await response.json();
      const videoLinks = await json.items.map(item => "https://www.youtube.com/embed/" + item.id.videoId);
      const videoiframe = await videoLinks.map(link => <iframe className="video" width="560" height="315" src={ link } title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>);
      setVideos(videoiframe);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  //Handle the state of currentVideoIndex to get the previous video
  const handlePrevClick = () => {
    if (currentVideoIndex > 0) {
      setCurrentVideoIndex(currentVideoIndex - 1);
    }
  };
  
  //Handle the state of currentVideoIndex to get the next video
  const handleNextClick = () => {
    if (currentVideoIndex < videos.length - 1) {
      setCurrentVideoIndex(currentVideoIndex + 1);
    }
  };

  useEffect(() => {
    getYTVideoLink();
  }, []);

  //Return data to display on the website, also takes data from vidoes to display on the website
  return (
    <div className="content fadeSlideIn">
      {
        isLoading ? 
        <><Row className="justify-content-md-center">
            <Col md="auto">
              <Spinner animation="border" />
            </Col>
          </Row></> :
        <><Row className="justify-content-md-center">
            <Col md="auto">
              { videos[currentVideoIndex] }
            </Col>
          </Row>
          <Row className="justify-content-md-center">
            <Col md="auto">
              <Button variant="primary" size="lg" onClick={handlePrevClick}>Prev</Button>{" "}
              <Button variant="primary" size="lg" onClick={handleNextClick}>Next</Button>
            </Col>
          </Row>
          <Row className="justify-content-md-center">
              <Col md="auto">
                <div>Watch all videos on my <a href="https://www.youtube.com/@therearenohills3171" target="_blank">YouTube Channel</a></div>
              </Col>
            </Row></>
      }
    </div>
  );
}
export default Videos