import { Slider, Slide } from 'vtex.slider'

handleChangeSlide = i => {
  this.setState({ currentSlide: i })
}

render() {
  const { currentSlide } = this.state
  // ...

  const { myProducts } = this.props

  return (
    <Slider currentSlide={currentSlide} onChangeSlide={this.handleChangeSlide}>
      {myProducts.map(product => (
        <Slide key={product.id}>
          <DisplayProductComponent product={product} />
        </Slide>
      ))}
    </Slider>
  )
}

render() {
  const { currentSlide } = this.state
  const { myProducts } = this.props

  // The keys of the object represent the size of the window in px.
  // In this case if the window is 1300px large or bigger it will show 5 items,
  // If it has 900px or any size until 1299px it will show 4 items
  const perPage = {
    1300: 5,
    900: 4,
    700: 2,
    600: 1,
  }

  return (
    <Slider
      currentSlide={currentSlide}
      onChangeSlide={this.handleChangeSlide}
      perPage={perPage}
    >
      {myProducts.map(product => (
        <Slide key={product.id}>
          <DisplayProductComponent product={product} />
        </Slide>
      ))}
    </Slider>
  )
}

arrowRender = ({ orientation, onClick }) => {
  return (
    <div className="arrow-container-class" onClick={onClick}>
      <MyArrowComponent orientation={orientation} />
    </div>
  )
}

arrowContainerRender = ({ children }) => {
  return (
    <MyContainerComponent>
      {children}
    </MyContainerComponent>
  )
}

render() {
  const { currentSlide } = this.state
  const { myProducts } = this.props

  const perPage = {
    1300: 5,
    1100: 4,
    900: 3,
    700: 2,
    300: 1
  }

  return (
    <SliderContainer className="mw9">
      <Slider
        loop
        easing="ease"
        duration={500}
        perPage={perPage}
        currentSlide={currentSlide}
        arrowRender={this.arrowRender}
        onChangeSlide={this.handleChangeSlide}
        arrowsContainerComponent={this.arrowContainerRender}
      >
        {myProducts.map(product => (
          <Slide
            className="slide-css-class"
            sliderTransitionDuration={500}
            key={product.id}
            defaultWidth={280}
          >
            <ProductComponent product={product} />
          </Slide>
        ))}
      </Slider>
      <Dots
        loop
        showDotsPerPage
        perPage={this.perPage}
        currentSlide={currentSlide}
        totalSlides={myProducts.length}
        onChangeSlide={this.handleChangeSlide}
        classes={{
          root: 'pv4',
          notActiveDot: 'bg-muted-3',
          dot: 'dot pointer br-100',
          activeDot: 'bg-emphasis'
        }}
      />
    </SliderContainer>
  )
}