import React from 'react';
import './ImgSlider.scss';
import PropTypes from "prop-types";
import Img1 from "../../../assets/img/ImgSlider/adult-blur-church-1309052.png"
import Img2 from "../../../assets/img/ImgSlider/adult-cellphone-cheerful-1530313.png"
import Img3 from "../../../assets/img/ImgSlider/adult-commerce-cook-375889.png"
import Img4 from "../../../assets/img/ImgSlider/aisle-arches-architecture-2090830.png"
import PrArrow from "../../../assets/img/ImgSlider/Rectangle 3.153 (1).png"
import NtArrow from "../../../assets/img/ImgSlider/Rectangle 3.153.png"

class ImgSlider extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      images: [
        `${Img1}`,
        `${Img2}`,
        `${Img3}`,
        `${Img4}`
      ],
      currentIndex: 0,
      translateValue: 0
    }
  }

  goToPrevSlide = () => {
    if(this.state.currentIndex === 0)
    return;
    this.setState(prevState => ({
      currentIndex: prevState.currentIndex -1,
      translateValue: prevState.translateValue + this.slideWidth()
    }))
  }

  goToNextSlide = () => {
    if(this.state.currentIndex === this.state.images.length -1) {
      return this.setState({
        currentIndex:0,
        translateValue: 0
      })
    }

    this.setState(prevState => ({
      currentIndex: prevState.currentIndex +1,
      translateValue: prevState.translateValue + - (this.slideWidth())
    }));
  }

  slideWidth = () => {
    return document.querySelector('.slide').clientWidth
  };

  render() {
    return(
      <div className="ImgSlider_Container">

        <div className="ImgSlider_Container_Wrapper"
        style={{
          transform: `translateX(${this.state.translateValue}px)`,
          transition: 'transform ease-out 0.45s'
        }}>
          {
            this.state.images.map((image, imageIndex) => (
              <Slide key={imageIndex} image={image}/>
            ))
          }
        </div>

        <LeftArrow
        goToPrevSlide={this.goToPrevSlide}
        />

        <RightArrow
        goToNextSlide={this.goToNextSlide}
        />

      </div>

    );
  }
}

const Slide = ({ image }) => {
  const styles = {
    backgroundImage: `url(${image})`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: '50% 60%'
  }
  return <div className="slide" style={styles}></div>
}

const LeftArrow =(props) => {
  return (
    <div className="backArrow arrow" onClick={props.goToPrevSlide}>

      <img className="la-icon" src={PrArrow} />

    </div>
  );
}

const RightArrow = (props) => {
  return (
    <div className="nextArrow arrow" onClick={props.goToNextSlide}>
      <img className="ra-icon" src={NtArrow} />
    </div>
  );
}

export default ImgSlider;