/*
 * https://frontendeval.com/questions/image-carousel
 *
 * Build an auto-playing image carousel
 */

import { useState, useEffect } from "https://cdn.skypack.dev/react@17.0.1";

const getImages = async ({period}) => {
    const URL = `https://www.reddit.com/r/aww/top/.json?t={period}`;
    try {
      const response = await fetch(URL);
      if (response.ok) {
        const data = await response.json();
        const images = data.data?.children
          .map((i) => i.data.url_overridden_by_dest)
          .filter((url) => url.slice(-3) === "jpg"); //where extension .jpg
        return images;
      }
    } catch (e) {
      console.log("error on fetch", e);
    }
};

const Slider = ({period}) => {
  const [srcArray, setSrcArray] = React.useState([]);
  const [visible, setVisible] = React.useState(0);

  React.useEffect(() => {
    getImages({period}).then((data) => {
      setSrcArray(data);
    });
  }, []);

  React.useEffect(() => {
    const timeoutID = setTimeout(() => {
      goNext();
    }, 3000);
    return () => clearTimeout(timeoutID);
  }, [visible]);

  const goNext = (s) =>
    setVisible((s) => (s === srcArray.length - 1 ? 0 : s + 1));
  const goBack = (s) =>
    setVisible((s) => (s === srcArray.length - 1 ? 0 : s - 1));

  return (
    <>
      {srcArray.length > 0 && (
        <div className="slider-container">
          <button className="previous-button" onClick={goBack}>
            &lt;
          </button>
          <img src={srcArray[visible]} />
          <button className="next-button" onClick={goNext}>
            &gt;
          </button>
        </div>
      )}
    </>
  );
};

const App = () => {
  return (
    <div className="app-body">
      <Slider period={'day'} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));