import React from "react";
import {connect} from "react-redux";
import style from "./goodsSlider.module.sass";
import "./goodsSlider.sass";
import {pathStaticGoodsImages} from "../../../constants/images";
import {simpleGoodsMainSliderSettings} from "../../../constants/sliderSettings";
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext, Dot } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';
import ZoomableImg from "./zoomableImage/zoomableImage";

class GoodsSlider extends React.Component{



    render() {
            const {arrayPicturesForSlider} = this.props;
            return(
                <div className={style.mainContainer}>
                    <CarouselProvider
                        naturalSlideWidth={800}
                        naturalSlideHeight={550}
                        dragEnabled={false}
                        visibleSlides={1}
                        totalSlides={arrayPicturesForSlider.length}
                        className={style.mainSlideContainer}
                    >
                    <div className={style.carouselMainContainer}>
                        <Slider className={style.slaider}>
                            {
                                arrayPicturesForSlider.map((elem, i) => {
                                    return(
                                        <Slide index={i} key={i}>
                                            <ZoomableImg src={pathStaticGoodsImages + elem}/>
                                        </Slide>
                                    );
                                })
                            }
                        </Slider>
                    </div>
                    <div className={style.dotsContainer}>
                        {
                            arrayPicturesForSlider.map((elem, i) => {
                                return(
                                    <Dot slide={i} className={style.dot}>
                                        <img src={pathStaticGoodsImages + elem} alt={elem}/>
                                    </Dot>
                                );
                            })
                        }
                    </div>
                    </CarouselProvider>

                </div>

            )
        }
};

const mapStateToProps = state => {
    let { simpleGoodsData, isFetching, error } = state.simpleGoodsReducer;

    return{
        simpleGoodsData, isFetching, error
    }
};

export default connect(mapStateToProps)(GoodsSlider);