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

const { useState, useEffect, useRef } = React;
import { FaChevronLeft, FaChevronRight } from "https://esm.sh/react-icons/fa6";

const SliderButton = ({ direction, moveSlide }) => (
  <button 
    className={
      direction === "next"
        ? "slide-button next"
        : "slide-button prev"
    }
    onClick={moveSlide}
  >
   {direction === "next" ? (
      <FaChevronRight className="directional-arrow" alt="Right Arrow" />
    ) : (
      <FaChevronLeft className="directional-arrow" alt="Left Arrow" />
    )} 
  </button>
)

const Slider = ({ queryParam, transitionTheme }) => {
  const [slideIndex, setSlideIndex] = useState(1);
  const [carouselImages, setCarouselImages] = useState([]);
  const interval = useRef(null);
    
  const getImagesForCarousel = async () => {
    let url = `https://www.reddit.com/r/aww/top/.json?t=${queryParam}`;
    await fetch(url)
      .then((res) => {
        if (res.ok) return res.json();
        throw new Error("Network response was not ok.");
    })
      .then((res) => {
        let imageUrls = res.data.children
          .filter((img) => img.data.url_overridden_by_dest.includes("jpg"))
          .map((img) => ({ url: img.data.url_overridden_by_dest, title: img.data.title }));
        
        setCarouselImages(imageUrls);
    })
      .catch((err) => console.error(err));
  };
  
  useEffect(() => {
    getImagesForCarousel();
  }, [queryParam, transitionTheme]);
  
  const nextSlide = () => {
    if (slideIndex !== carouselImages.length) {
      setSlideIndex(slideIndex + 1);
    } else if (slideIndex === carouselImages.length) {
      setSlideIndex(1);
    }
    
    clearTimeout(interval.current);
  };
  
  const prevSlide = () => {
    if (slideIndex !== 1) {
      setSlideIndex(slideIndex - 1);
    } else if (slideIndex === 1) {
      setSlideIndex(carouselImages.length);
    }
    
    clearTimeout(interval.current);
  };
  
  const moveDot = (index) => {
    setSlideIndex(index);
  };
  
  const kebabCasedString = (stringToKebab) => (
    stringToKebab.split(" ").join("-")
  )
  const cssFormattedTheme = kebabCasedString(transitionTheme)

  setTimeout(nextSlide, 3000);
  
  return (
    <div className="slider-container">
      {carouselImages.map((image, index) => (
        <div
          key={image.url}
          className={
            slideIndex === index + 1
              ? `slide active-anim ${cssFormattedTheme}`
              : "slide"
          }
          >
            <img src={image.url} alt={image.title} />
          </div>
      ))}
      <SliderButton dirction="prev" moveSlide={prevSlide} />
      <SliderButton direction="next" moveSlide={nextSlide} />
      <div className="dots-container">
        {Array.from({ length: carouselImages.length }).map((dot, index) => (
          <div
            key={String(index)}
            className={
              slideIndex === index + 1 ? "dot-active" : "dot"
            }
            onClick={() => moveDot(index + 1)}/>
        ))}
      </div>
    </div>
  )
}

const TopImagesSelector = ({ selectTopImage }) => {
  const TOP_IMAGE_OPTIONS = ["all", "week", "month", "year"]
  
  const capitalizeString = (string) => (
    string.charAt(0).toUpperCase() + string.slice(1)
  )
  
  return (
    <div className="selector-container">
      <label htmlFor="top-images">Top Images</label>
        <select id="top-images" onChange={selectTopImage}>
          {TOP_IMAGE_OPTIONS.map((option) => (
            <option value={option}>{capitalizeString(option)}</option>
          ))}
        </select>
    </div>
  )
}

const TransitionSelect = ({ setTheme }) => {
  const THEME_OPTIONS = ["fade in", "slide left", "slide right"]
   
  return (
    <div className="selector-container">
      <label htmlFor="theme-select">Transition Theme</label>
        <select id="theme-select" onChange={setTheme}>
          {THEME_OPTIONS.map((option) => (
            <option value={option}>{option}</option>
          ))}
        </select>
    </div>
  )
}

const App = () => {
  const [topImage, setTopImage] = useState("all");
  const [transitionTheme, setTransitionTheme] = useState("fade in")
  
  const selectTopImage = (event) => {
    setTopImage(event.target.value);
  }
  
  const setTheme = (event) => {
    setTransitionTheme(event.target.value);
  }
    
  return (
    <>
      <Slider queryParam={topImage} transitionTheme={transitionTheme} />
       <div className="slider-options">
        <TopImagesSelector selectTopImage={selectTopImage} />
        <TransitionSelect setTheme={setTheme} />        
      </div>
    </>
  );
}

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