import React, { Fragment } from 'react'

import ComboBox from '../../toolBox/comboBox/combobox';
import CajaTexto from '../../toolBox/cajaTexto/cajaTexto';
import DatePicker from '../../toolBox/dataPicker/dataPicker';
import Botones from '../../Tools/botonera/headerBotones';
import CheckBox from '../../toolBox/checkBox/checkBox';

import Config from '../../../config/constantes';


class generaciones extends React.Component {



    render() {
        const { botones, Datos, titulo, selectedOptionPlanilla, listaPlanilla, selectedOptionMesPer, listaMeses } = this.props;
        return (
            <Fragment>
                <div className="col-md-12">
                    <div className='row'>
                        <div className="col-md-6">
                            <h1>{titulo}</h1>
                        </div>
                        <div className="col-md-6 text-right">
                            <div className="acciones">
                                <Botones
                                    botones={botones}
                                />
                            </div>

                        </div>

                    </div>
                    <div className="content">
                        <div className="content-box box-primary">
                            <div className='row'>
                                <ComboBox id="cmbtipoplanilla" col="4" attributes={Datos.TipoPlanilla.attributes} value={selectedOptionPlanilla} label={Datos.TipoPlanilla.attributes.label} datos={listaPlanilla} onChange={this.props.onhandleSelectedOptionPlanilla} />
                                <ComboBox id="mesProceso" col="4" attributes={Datos.MesProceso.attributes} value={selectedOptionMesPer} label={Datos.MesProceso.attributes.label} datos={listaMeses} onChange={this.props.onhandleSelectMesPer} />
                                <CajaTexto col="4" id="anoProceso" type="text" label={Datos.AnoProceso.attributes.label} value={Datos.AnoProceso.value} attributes={Datos.AnoProceso.attributes} onChangeInput={() => { }} />
                            </div>
                            <div className="row">
                                <DatePicker id="desde" col="4" handleChange={() => { }} value={Datos.Desde.value} attributes={Datos.Desde.attributes} label={Datos.Desde.attributes.label} formatDate={Config.dateformat} />
                                <DatePicker id="hasta" col="4" handleChange={() => { }} value={Datos.Hasta.value} attributes={Datos.Hasta.attributes} label={Datos.Hasta.attributes.label} formatDate={Config.dateformat} />
                                <CheckBox id='ulitmaMes' col="4" attributes={Datos.ulitmaMes.attributes} value={Datos.ulitmaMes.value} label={Datos.ulitmaMes.attributes.label} onChange={this.props.handleCheckBox} />
                            </div>
                        </div>
                    </div>
                </div>
            </Fragment>
        );

    }



}
export default generaciones;