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

import Star from '../Star/Star.jsx';
import P from '../../Common/BackBox/P.jsx';
import Comentario from './Comentario.jsx';

const SelectedItem2 = (props) => {


    const responsive = {
        superLargeDesktop: {
    
          breakpoint: { max: 4000, min: 3000 },
          items: 2
        },
        desktop: {
          breakpoint: { max: 3000, min: 1024 },
          items: 2
        },
        tablet: {
          breakpoint: { max: 1024, min: 464 },
          items: 2
        },
        mobile: {
          breakpoint: { max: 464, min: 0 },
          items: 2
        }
      };

    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 (
        <div class="prevista-articulo">
            <div class="row">
                <div class="col-lg-2 col-md-12">
                    <P clase='variable text-left' valor={props.TopVentas} />

                    <h4>{props.Nombre}</h4>
                    <P clase='cod' valor={"Código: " + props.Id.toString()} />
                    <P clase='tiempo' valor={props.CantidadPedidos.toString() + " pedidos"} />

                    {props.Puntuacion !== undefined && <div>
                        <ul class="stars1">
                            {props.generarEstrellas(props.Puntuacion)}
                        </ul>
                    </div>}

                </div>
                <div class="col-lg-4 col-md-12">
                    <img class="image-product-preview" src={props.Imagen} />
                </div>
                <div class="col-lg-6 col-md-12">
                    <h4>Comentarios</h4>

                    
                    <Carousel
                        customRightArrow={<CustomRightArrow />}
                        customLeftArrow={<CustomLeftArrow />}
                        draggable={false}
                        swipeable
                        partialVisible={props.Comentarios && props.Comentarios.length > 1}
                        removeArrowOnDeviceType={["tablet", "mobile", "unique"]}
                        responsive={responsive}>                                                
                        
                        {props.Comentarios !== undefined && props.Comentarios.map(x => <Comentario
                            Fecha={x.Fecha}
                            Orden={x.Orden}
                            Calificacion={x.Puntuacion == 0 ? 1 : x.Puntuacion}
                            generarEstrellas={props.generarEstrellas}
                            Comentario={x.Comentario}
                        />)
                        }
                        
                        </Carousel>

                    
                </div>
            </div>
        </div>
    );

}

export default SelectedItem2;