//slider.js
import SliderData from "../Resources/SliderData";
import React, { useState } from "react";
import "./Slider.css";
import SliderBtn from "../components/SliderButton";
function Slider() {
  const [slideIndex, setSlideIndex] = useState(0);
  const nextSlide = () => {
    if (slideIndex !== SliderData.length - 1) {
      setSlideIndex(slideIndex + 1);
      console.log(slideIndex);
    } else if (slideIndex === SliderData.length - 1) {
      setSlideIndex(0);
      console.log(slideIndex);
    }
  };

  const prevSlide = () => {
    if (slideIndex !== 0) {
      setSlideIndex(slideIndex - 1);
    } else if (slideIndex === 0) {
      setSlideIndex(SliderData.length - 1);
    }
  };

  return (
    <div>
      <div className="container-slider">
        {SliderData.map(({ image, id }) => (
          <div
            key={id}
            className={slideIndex === id ? "slide active-anim" : "slide"}
          >
            <SliderBtn moveSlide={prevSlide} direction="previous" />
            <img src={SliderData[slideIndex].image} alt="image slider" />

            <SliderBtn moveSlide={nextSlide} direction="next" />
          </div>
        ))}
      </div>
      <div className="container-dots">
        {Array.from({ length: 5 }).map((item, index) => (
          <div
            onClick={() => moveDot(index + 1)}
            className={slideIndex === index + 1 ? "dot active" : "dot"}
          ></div>
        ))}
      </div>{" "}
    </div>
  );
}
export default Slider;

//sliderButton.js
import nextIcon from "../Resources/images/next1.png";
import previousIcon from "../Resources/images/prev1.jpg";
function SliderBtn(props) {
  function icon() {
    if (props.direction === "next") {
      return nextIcon;
    } else {
      return previousIcon;
    }
  }
  /*document.getElementById("btn").clicked===true*/
  // function moveSliderF() {
  //   if (props.direction === "next") {
  //     return btn-slide-next;
  //   } else {
  //     return btn-slide-prev;
  //   }
  // }

  return (
    <div>
      <button
        className={
          props.direction === "next" ? "btn-slide next" : "btn-slide prev"
        }
        id="btn"
        onClick={props.moveSlide}
      >
        <img src={icon()} alt="icon" />
      </button>
    </div>
  );
}
export default SliderBtn;

const SliderData = [
  {
    id: 0,
    title: "Lorem ipsum",
    subTitle: "Lorem",
    image:
      "https://images.unsplash.com/photo-1460648304944-4883b5cfcee5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=891&q=80"
  },
  {
    id: 1,
    title: "Lorem ipsum",
    subTitle: "Lorem",
    image:
      "https://images.unsplash.com/photo-1524591431555-cc7876d14adf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c2xpZGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60"
  },
  {
    id: 2,
    title: "Lorem ipsum",
    subTitle: "lorem3",
    image:
      "https://images.freeimages.com/images/large-previews/25c/abstract-flowers-2-1199959.jpg"
  },
  {
    id: 3,
    title: "Lorem ipsum",
    subTitle: "Lorem",
    image:
      "https://media.istockphoto.com/photos/abstract-soft-watercolor-background-on-a-white-paper-pink-purple-and-picture-id1331709865?s=612x612"
  },
  {
    id: 4,
    title: "Lorem ipsum",
    subTitle: "Lorem",
    image:
      "https://images.freeimages.com/images/large-previews/db4/disturbing-water-1180557.jpg"
  }
];
// {
//   id: uuidv4(),
//   title: "Lorem ipsum",
//   subTitle: "Lorem"
// },
export default SliderData;