import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
    Carousel,
    CarouselControl,
    CarouselItem,
    CarouselCaption,
    CarouselIndicators,
} from 'reactstrap';
import CarrouselItemComponent from './CarrouselItemComponent';

const Carrousel = props => {
    const { products } = props;

    const [activeIndex, setActiveIndex] = useState(0);
    const [animating, setAnimating] = useState(false);

    const next = () => {
        if (animating) return;
        const nextIndex =
            activeIndex === products.length - 1 ? 0 : activeIndex + 1;
        setActiveIndex(nextIndex);
    };

    const previous = () => {
        if (animating) return;
        const nextIndex =
            activeIndex === 0 ? products.length - 1 : activeIndex - 1;
        setActiveIndex(nextIndex);
    };

    const goToIndex = newIndex => {
        if (animating) return;
        setActiveIndex(newIndex);
    };

    const slides = products.map(product => {
        return (
            <CarouselItem
                className="custom-tag"
                tag="div"
                onExiting={() => setAnimating(true)}
                onExited={() => setAnimating(false)}
            >
                <CarrouselItemComponent product={product} />
                <CarouselCaption
                    captionText={product.name}
                    className="text-danger"
                />
            </CarouselItem>
        );
    });

    return (
        <div>
            <Carousel
                activeIndex={activeIndex}
                next={next}
                previous={previous}
                ride="carousel"
                interval="6000"
            >
                <CarouselIndicators
                    items={products}
                    activeIndex={activeIndex}
                    onClickHandler={goToIndex}
                />
                {slides}
                <CarouselControl
                    direction="prev"
                    directionText="Previous"
                    onClickHandler={previous}
                    className="carrousel-control"
                />
                <CarouselControl
                    direction="next"
                    directionText="Next"
                    onClickHandler={next}
                    className="carrousel-control"
                />
            </Carousel>
        </div>
    );
};

Carrousel.propTypes = {
    products: PropTypes.node.isRequired,
};

export default Carrousel;