text: import Arrow from 'components/slider/arrow';
  import Dots from 'components/slider/dots';
  import Slide from 'components/slider/slide';
  import SliderContent from 'components/slider/sliderContent';
  import React, { useEffect, useRef, useState } from 'react';
  import { SlideContainer } from './slider.css';
  
  const getWidth = () =>
    typeof window !== 'undefined' ? window.innerWidth : null;
  
  const Slider = ({ slides: items, autoPlay }) => {
    // slide featured items
    const slides = items
      .filter(
        (item) =>
          item.frontmatter.slide &&
          item.frontmatter.showSlide &&
          item.frontmatter.slide
      )
      .map((item) => item.frontmatter);
  
    const firstSlide = slides[0];
    const secondSlide = slides[1];
    const lastSlide = slides[slides.length - 1];
  
    const [state, setState] = useState({
      activeSlide: 0,
      translate: getWidth(),
      transition: 0.45,
      _slides: [lastSlide, firstSlide, secondSlide],
    });
  
    const { activeSlide, translate, _slides, transition } = state;
  
    const autoPlayRef = useRef();
    const transitionRef = useRef();
    const resizeRef = useRef();
  
    useEffect(() => {
      autoPlayRef.current = nextSlide;
      transitionRef.current = smoothTransition;
      resizeRef.current = handleResize;
    });
  
    useEffect(() => {
      const play = () => {
        autoPlayRef.current();
      };
  
      const smooth = (e) => {
        if (e.target.className.includes('SliderContent')) {
          transitionRef.current();
        }
      };
  
      const resize = () => {
        resizeRef.current();
      };
  
      const transitionEnd = window.addEventListener('transitionend', smooth);
      const onResize = window.addEventListener('resize', resize);
  
      let interval = null;
  
      if (autoPlay) {
        interval = setInterval(play, autoPlay * 4000);
      }
  
      return () => {
        window.removeEventListener('transitionend', transitionEnd);
        window.removeEventListener('resize', onResize);
  
        if (autoPlay) {
          clearInterval(interval);
        }
      };
    }, []);
  
    useEffect(() => {
      if (transition === 0) setState({ ...state, transition: 0.45 });
    }, [transition]);
  
    const handleResize = () => {
      setState({ ...state, translate: getWidth(), transition: 0 });
    };
  
    const smoothTransition = () => {
      let _slides = [];
  
      // We're at the last slide.
      if (activeSlide === slides.length - 1)
        _slides = [slides[slides.length - 2], lastSlide, firstSlide];
      // We're back at the first slide. Just reset to how it was on initial render
      else if (activeSlide === 0) _slides = [lastSlide, firstSlide, secondSlide];
      // Create an array of the previous last slide, and the next two slides that follow it.
      else _slides = slides.slice(activeSlide - 1, activeSlide + 2);
  
      setState({
        ...state,
        _slides,
        transition: 0,
        translate: getWidth(),
      });
    };
  
    const nextSlide = () =>
      setState({
        ...state,
        translate: translate + getWidth(),
        activeSlide: activeSlide === slides.length - 1 ? 0 : activeSlide + 1,
      });
  
    const prevSlide = () =>
      setState({
        ...state,
        translate: 0,
        activeSlide: activeSlide === 0 ? slides.length - 1 : activeSlide - 1,
      });
  
    return (
      <SlideContainer>
        <SliderContent
          translate={translate}
          transition={transition}
          width={getWidth() * _slides.length}
        >
          {_slides.map((_slide, i) => (
            <Slide width={getWidth()} key={i} content={_slide} />
          ))}
        </SliderContent>
  
        <Arrow direction="left" handleClick={prevSlide} />
        <Arrow direction="right" handleClick={nextSlide} />
  
        <Dots slides={slides} activeSlide={activeSlide} />
      </SlideContainer>
    );
  };
  
  export default Slider;
  