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

//https://www.flickr.com/services/api/misc.urls.html

//Photo function that handles the content of Photography
function Photos() {
  const [isLoading, setLoading] = useState(true);
  const [photoData, setPhotoData] = useState([]);
  const [photoLinks, setPhotoLinks] = useState([]);

  //Create const that gets Flickr Api data and build image links from data
  const createFlickrLinks = async () => {
    try {
      const response = await fetch("https://express-api-neinhills.onrender.com/flickr");
      console.log(response);
      const json = await response.json();
      console.log(json);
      const flickrLink = await json.photos.photo.map(photo => "https://live.staticflickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg");
      setPhotoData(flickrLink);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

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

  //Return data to display on the website, also takes data from flickrLink 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">
              {
                photoData.map((url, key) => <Image key={key} className="p-2" src={url} thumbnail />)
              }
            </Col>
          </Row></>
      }
    </div>
  );
}
export default Photos