import React from 'react';

import Botones from '../../../components/UI/botonera/headerBotones.js';
import MonthYearPicker from '../../../components/UI/dataPicker/monthYearPicker.jsx'
import RadioButton from '../../../components/UI/radioButton/radiobutton.jsx';
import CajaTexto from '../../../components/UI/cajaTexto/cajaTexto.jsx';
import ComboBox from '../../../components/UI/comboBox/combobox.jsx';
import DatePicker from '../../../components/UI/dataPicker/dataPicker.jsx';
import Division from '../../../components/UI/division/division.jsx';

import Config from "../../../components/Util/constantes.js";

function EstadosAsientoInt(props) {
    return (
        <>
            <div className="col-md-12">
                <div className='row'>
                    <div className="col-md-6">
                        <h1>{props.titulo}</h1>
                    </div>
                    <div className="col-md-6 text-right">
                        <div className="acciones">
                            <Botones
                                botones={props.botones}
                            />
                        </div>
                    </div>
                </div>
                <div className="content">
                    <div className="content-box box-primary">
                        <div className='row'>
                            <ComboBox id="SelectedEstadoAnt" col="6" attributes={props.Datos.EstadoAnt.attributes} value={props.selectedEstadoAnt} label={props.Datos.EstadoAnt.attributes.label} datos={props.listaEstadoAnt} onChange={props.handleSelectEstadoAnt} />                            
                            <ComboBox id="SelectedEstado" col="6" attributes={props.Datos.Estado.attributes} value={props.selectedEstado} label={props.Datos.Estado.attributes.label} datos={props.listaEstado} onChange={props.handleSelectEstado} />                            
                        </div>
                        <div className="row">
                            <RadioButton id="selectedFiltro" col="6" attributes={props.Datos.Filtro.attributes} value={props.selectedFiltro} datos={props.listaFiltros} onChange={props.handleRadioButton} horizontal={true} label={props.Datos.Filtro.attributes.label} />
                        </div>
                        <div className="row">
                            <MonthYearPicker id="fecMesAno" col="6" pvalue={props.Datos.fecMesAno.value} attributes={props.Datos.fecMesAno.attributes} label={props.Datos.fecMesAno.attributes.label} handleChange={props.onhandleChangeDate} />
                        </div>
                        <div className='row'>
                            <ComboBox id="selectedTipoAsiento" col="6" attributes={props.Datos.TipoAsiento.attributes} value={props.selectedTipoAsiento} label={props.Datos.TipoAsiento.attributes.label} datos={props.listaTipoAsiento} onChange={props.handleSelectTipoAsiento} />
                        </div>
                        <div className="row">
                            <CajaTexto col="6" id="Numero" type="text" label={props.Datos.Numero.attributes.label} value={props.Datos.Numero.value} attributes={props.Datos.Numero.attributes} onChangeInput={props.onChangeInput} />
                            <CajaTexto col="6" id="NumeroHasta" type="text" label={props.Datos.NumeroHasta.attributes.label} value={props.Datos.NumeroHasta.value} attributes={props.Datos.NumeroHasta.attributes} onChangeInput={props.onChangeInput} />
                        </div>
                        <div className='row'>
                            <DatePicker id="FechaInicio" col="6" value={props.Datos.FechaInicio.value} attributes={props.Datos.FechaInicio.attributes} label={props.Datos.FechaInicio.attributes.label} formatDate={Config.dateformat} handleChange={props.onhandleChangeDate} />
                            <DatePicker id="FechaFinal" col="6" value={props.Datos.FechaFinal.value} attributes={props.Datos.FechaFinal.attributes} label={props.Datos.FechaFinal.attributes.label} formatDate={Config.dateformat} handleChange={props.onhandleChangeDate} />
                        </div>
                        <div className="row">
                            <Division id="division" label={""} attributes={{}} />
                        </div>                        
                    </div>
                </div>
            </div>
            <br />
        </>
    );
}
export default EstadosAsientoInt;