import React, { Fragment } from 'react';
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import BackBox from '../../components/Common/BackBox/index.jsx';
import DatePicker from '../../components/UI/DatePicker/DatePicker.jsx';

const ClienteInt = (props) => {
    return (
        <Fragment>
            <div className="main">
                <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="back2">
                        <div className="row">

                            <div className="col-lg-4 col-md-12">
                                <BackBox
                                    title={'Total de Clientes'}
                                    value={props.TotalClientes}
                                    centrar={true}
                                />
                            </div>

                            <div className="col-lg-4 col-md-12">
                                <BackBox
                                    title={'Total de Clientes Activos'}
                                    value={props.TotalClientesActivos}
                                    centrar={true}
                                />
                            </div>

                            <div className="col-lg-4 col-md-12">
                                <BackBox
                                    title={'Total de Clientes Nuevos'}
                                    value={props.TotalClientesNuevos}
                                    centrar={true}
                                />
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-lg-4 col-md-12">
                            <div className="back2">
                                <h2 className="mt-2">Contáctenos / Reclamaciones</h2>
                                <div className="row">
                                    <div className="col">
                                        <BackBox
                                            title={'Cantidad de Contactos'}
                                            value={props.ReclamacionesContactos}
                                            centrar={true}
                                        />

                                        <BackBox
                                            title={'Cantidad de Reclamos'}
                                            value={props.ReclamacionesReclamos}
                                            centrar={true}
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-8 col-md-12">
                            <div className="back3-highchart mt-4">
                                {props.OrdenesNDias.length > 0 && <HighchartsReact
                                    highcharts={Highcharts}
                                    options={props.opciones}
                                />}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Fragment>
    );
}
export default ClienteInt;