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 ItemCarousel from '../../components/UI/ItemCarousel/ItemCarousel.jsx';
import SelectedItem from '../../components/UI/ItemCarousel/SelectedItem.jsx';
import DatePicker from '../../components/UI/DatePicker/DatePicker.jsx';

const OrdenesInt = (props) => {

    const BBTotalOrdenes = [
        { clase: "variable", valor: props.TotalOrdenes }
    ];

    const BBCarritoPromedio = [
        {
            detalle: [{ clase: 'variable', valor: props.PromedioIngresos },
            { clase: 'subtitulo', valor: 'Ingresos' }]
        },
        {
            detalle: [{ clase: 'variable', valor: props.PromedioPedidos },
            { clase: 'subtitulo', valor: 'Pedidos' }]
        },
    ];

    const BBPromedioDiario = [
        { clase: "variable", valor: `${props.PromedioDiario}%` }
    ];

    const BBCarritosAbandonados = [
        { clase: "variable", valor: props.CarritosAbandonados }
    ];

    const BBTasaAbandono = [
        { clase: "variable", valor: `${props.PromedioAbandono}%` }
    ];

    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 py-3 mx-2 ml-3 mt-3'>
                    <div className='col-xs-6 mr-5'>
                        <DatePicker id="Desde" value={props.Datos.Desde.value} attributes={props.Datos.Desde.attributes} label={props.Datos.Desde.attributes.label} formatDate={"dd/MM/yyyy"} handleChange={props.onhandleChangeDate} minDate={props.Datos.Desde.attributes.minDate} maxDate={props.Datos.Desde.attributes.maxDate} />
                    </div>
                    <br />
                    <br />
                    <div className='col-xs-6 mr-5'>
                        <DatePicker id="Hasta" value={props.Datos.Hasta.value} attributes={props.Datos.Hasta.attributes} label={props.Datos.Hasta.attributes.label} formatDate={"dd/MM/yyyy"} handleChange={props.onhandleChangeDate} minDate={props.Datos.Hasta.attributes.minDate} maxDate={props.Datos.Hasta.attributes.maxDate} />
                    </div>
                </div>
                <div className="row mb-3">
                    <div className="col-lg-8 col-md-12">
                        <div className="back2">
                            <h2>Órdenes</h2>
                            <div className="row">
                                <div className="col-lg-3 col-md-12">
                                    <BakBox4
                                        titulo={'Órdenes Entregadas'}
                                        centrar={true}
                                        detalle={BBTotalOrdenes}
                                    />
                                </div>
                                <div className="col-lg-6 col-md-12">
                                    <BakBox4
                                        titulo={'Carrito Promedio'}
                                        columnas={BBCarritoPromedio}
                                        centrar={true}
                                    />
                                </div>
                                <div className="col-lg-3 col-md-12">
                                    <BakBox4
                                        titulo={'Promedio Diario'}
                                        centrar={true}
                                        detalle={BBPromedioDiario}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-4 col-md-12">
                        <div className="back2">
                            <h2>Carritos Abandonados</h2>
                            <div className="row">
                                <div className="col">
                                    <BakBox4
                                        titulo={'Cantidad de Carritos'}
                                        detalle={BBCarritosAbandonados}
                                        centrar={true}
                                    />
                                </div>
                                <div className="col">
                                    <BakBox4
                                        titulo={'Tasa de Abandono'}
                                        centrar={true}
                                        claseTitulo={'mb-3'}
                                        detalle={BBTasaAbandono}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-lg-8 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>MÁS VENDIDOS</span></h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="back5">
                                        <div className="row">
                                            <div className="col">
                                                <div className="prevista-articulo">
                                                    <div className="row">
                                                        {props.ArticuloSeleccionado &&
                                                            <SelectedItem
                                                                TopVentas={props.ArticuloSeleccionado.TopVentas}
                                                                Nombre={props.ArticuloSeleccionado.Nombre}
                                                                CantidadPedidos={props.ArticuloSeleccionado.Calificacion}
                                                                Id={props.ArticuloSeleccionado.Articulo_Id}
                                                                Imagen={props.ArticuloSeleccionado.Imagenes[1]}
                                                            />}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="row">
                                            <div className="col mt-4">
                                                <Carousel
                                                    customRightArrow={<CustomRightArrow />}
                                                    customLeftArrow={<CustomLeftArrow />}
                                                    draggable={false}
                                                    swipeable
                                                    partialVisible={(props.TopMasVendidos ? props.TopMasVendidos : 1) > 1}
                                                    responsive={props.responsive}
                                                    removeArrowOnDeviceType={["tablet", "mobile", "unique"]}>
                                                    {props.TopMasVendidos && props.TopMasVendidos.map(
                                                        x => <ItemCarousel
                                                            TopVentas={x.TopVentas}
                                                            Id={x.Articulo_Id}
                                                            Imagen={x.Imagenes[0]}
                                                            onClick={props.onClick}
                                                            Nombre={x.Nombre}
                                                        />

                                                    )}
                                                </Carousel>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-4 col-md-12">
                        <div className="back2 scroll2">
                            <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>ABANDONADOS</span></h3>
                                    </div>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col">
                                    {props.TopAbandonados &&
                                        props.TopAbandonados.map(x =>
                                            <BakBox7
                                                Posicion={x.TopVentas}
                                                Id={x.Articulo_Id}
                                                Nombre={x.Nombre}
                                            />)
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Fragment>
    )

}

export default OrdenesInt;