import React, { Fragment } from 'react';

import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

import BakBox4 from '../../components/Common/BackBox/BakBox4.jsx';
import BakBox7 from '../../components/Common/BackBox/BakBox7.jsx';
import Star from '../../components/UI/Star/Star.jsx';
import Item from '../../components/UI/ItemCarousel/ItemCarousel.jsx';
import SelectedItem2 from '../../components/UI/ItemCarousel/SelectedItem2.jsx';
import DatePicker from '../../components/UI/DatePicker/DatePicker.jsx';

const ArticulosInt = (props) => {

    const generarEstrellas = (cantidad) => {

        let stars = [];

        for (let i = 0; i < cantidad; i++) {
            stars.push(<Star key={i} />)
        }

        return stars;

    }

    const BBArticulosCalificados = [        
        { clase: "variable mt-3", valor: props.ArticulosCalificados }
    ];

    const CustomRightArrow = ({ onClick, ...rest }) => {
        const {
            onMove,
            carouselState: { currentSlide, deviceType }
        } = rest;

        return <button aria-label="Go to next slide" onClick={() => onClick()} className="react-multiple-carousel__arrow react-multiple-carousel__arrow--right" type="button">{'>'}</button>;
    };

    const CustomLeftArrow = ({ onClick, ...rest }) => {
        const {
            onMove,
            carouselState: { currentSlide, deviceType }
        } = rest;

        return <button aria-label="Go to previous slide" onClick={() => onClick()} className="react-multiple-carousel__arrow react-multiple-carousel__arrow--left" type="button">{'<'}</button>;
    };

    return (
        <Fragment>
            <div className="container">               
                <div className="row">
                    <div className="col-md-12">
                        <div className="back2">
                            <div className="row">
                                <div className="col-lg-6 col-md-12">
                                    <div className="back4 card-articulo text-center">
                                        <h3>Artículos Activos</h3>
                                        <div id="divGrafico" style={{ minHeight: '150px' }}></div>
                                    </div>
                                </div>
                                <div className="col-lg-3 col-md-12">
                                    <BakBox4
                                        titulo={'Artículos Calificados'}
                                        detalle={BBArticulosCalificados}
                                        className={'card-articulo'}
                                        centrar={true}
                                        br={true}
                                    />
                                </div>
                                <div className="col-lg-3 col-md-12">
                                    <div className="back4 card-articulo">
                                        <h3 className="marginx mb-2">Promedio de Calificación</h3>
                                        {props.PromedioCalificacion !== 0 &&
                                            <ul className="stars3 mt-5">
                                                {generarEstrellas(parseInt(props.PromedioCalificacion))}
                                            </ul>}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-lg-9 col-md-12">
                        <div className="back2">
                            <div className="row">
                                <div className="col">
                                    <div className="titles-art">
                                        <div className="row no-gutters">
                                            <div className="col-auto">
                                                <p className="variable">10</p>
                                            </div>
                                            <div className="col">
                                                <h3>TOP ARTÍCULOS <span>MEJOR CALIFICADOS</span></h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="back5">
                                        <div className="row">
                                            <div className="col">
                                                {props.ArticuloSeleccionado &&
                                                    <SelectedItem2
                                                        TopVentas={props.ArticuloSeleccionado.TopVentas}
                                                        Nombre={props.ArticuloSeleccionado.Nombre}
                                                        CantidadPedidos={props.ArticuloSeleccionado.Calificacion}
                                                        Puntuacion={props.ArticuloSeleccionado.Puntuacion}
                                                        Id={props.ArticuloSeleccionado.Articulo_Id}
                                                        Imagen={props.ArticuloSeleccionado.Imagenes[1]}
                                                        Comentarios={props.ComentariosArticulo}
                                                        generarEstrellas={generarEstrellas}
                                                        responsive={props.responsive}
                                                    />}
                                            </div>
                                        </div>
                                        <div className="row">
                                            <div className="col">
                                                <Carousel
                                                    customRightArrow={<CustomRightArrow />}
                                                    customLeftArrow={<CustomLeftArrow />}
                                                    draggable={false}
                                                    swipeable
                                                    partialVisible={props.ArticulosMejorCalificados && props.ArticulosMejorCalificados.length > 1}
                                                    removeArrowOnDeviceType={["tablet", "mobile", "unique"]}
                                                    responsive={props.responsive}>
                                                    {props.ArticulosMejorCalificados && props.ArticulosMejorCalificados.length !== 0 && props.ArticulosMejorCalificados.map(
                                                        x => <Item
                                                            TopVentas={x.TopVentas}
                                                            Id={x.Articulo_Id}
                                                            Imagen={x.Imagenes !== null ? x.Imagenes[0] : x.Imagen}
                                                            onClick={props.onClick}
                                                            Nombre={x.Nombre}
                                                            Calificacion={x.Puntuacion == 0 ? 1 : x.Puntuacion}
                                                            generarEstrellas={generarEstrellas}
                                                        />

                                                    )}
                                                </Carousel>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-3 col-md-12">
                        <div className="back2 scroll">
                            <div className="titles-art">
                                <div className="row no-gutters">
                                    <div className="col-auto">
                                        <p className="variable">10</p>
                                    </div>
                                    <div className="col">
                                        <h3>TOP ARTÍCULOS <span>PEOR CALIFICADOS</span></h3>
                                    </div>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col">
                                    {props.ArticulosPeorCalificados &&
                                        props.ArticulosPeorCalificados.map(x =>
                                            <BakBox7
                                                Posicion={x.TopVentas}
                                                Id={x.Articulo_Id}
                                                Nombre={x.Nombre}
                                                generarEstrellas={generarEstrellas}
                                                Puntuacion={x.Puntuacion == 0 ? 1 : x.Puntuacion}
                                            />)
                                    }

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </Fragment>
    )

}
export default ArticulosInt;