import React from 'react';

import Botones from '../../../components/UI/botonera/headerBotones.js';
import CajaTexto from '../../../components/UI/cajaTexto/cajaTexto.jsx';
import CajaTextoNumero from '../../../components/UI/cajaTexto/cajaTextoNumero.jsx';
import DatePicker from '../../../components/UI/dataPicker/dataPicker.jsx';
import TextArea from '../../../components/UI/textArea/textArea.jsx';
import ComboBox from '../../../components/UI/comboBox/combobox.jsx';
import Division from '../../../components/UI/division/division.jsx';
import TablaFiltro from '../../../components/UI/tablaFiltro/tablaFiltroSort.jsx';
import RadioButton from '../../../components/UI/radioButton/radiobutton.jsx';

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

function MantAsientoInt(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'>
                            <CajaTexto id='Nombre' col='6' value={props.Datos.Nombre.value} label={props.Datos.Nombre.attributes.label} attributes={props.Datos.Nombre.attributes} onChangeInput={props.onChangeInput} />
                            <CajaTexto id='Comentario' col='6' value={props.Datos.Comentario.value} label={props.Datos.Comentario.attributes.label} attributes={props.Datos.Comentario.attributes} onChangeInput={props.onChangeInput} />
                        </div>
                        <div className="row">
                            <CajaTexto id='Descripcion' col='6' value={props.Datos.Descripcion.value} label={props.Datos.Descripcion.attributes.label} attributes={props.Datos.Descripcion.attributes} onChangeInput={props.onChangeInput} />
                            <ComboBox id="cmbEstado" col="6" attributes={props.Datos.Estado.attributes} value={props.selectedEstado} label={props.Datos.Estado.attributes.label} datos={props.listaEstado} onChange={props.handleSelectedEstado} />
                        </div>
                        <div className='row'>
                            <ComboBox id="cmbTipo" col="6" attributes={props.Datos.Tipo.attributes} value={props.selectedTipoAsiento} label={props.Datos.Tipo.attributes.label} datos={props.listaTipoAsiento} onChange={props.handleSelectedTipoAsiento} />
                            <RadioButton id="selectedTipoValor" col="6" attributes={props.Datos.TipoValor.attributes} value={props.selectedTipoValor} datos={props.listaTipoValor} onChange={props.handleRadioButton} horizontal={true} label={props.Datos.TipoValor.attributes.label} labelEx={props.selectedTipoValor == props.listaTipoValor[1].value ? "Tome en cuenta que los valores que ingrese son porcentuales" : null} />
                        </div>
                        <div className="row">
                            <RadioButton id="selectedRecurrente" col="6" attributes={props.Datos.Recurrente.attributes} value={props.selectedRecurrente} datos={props.listaRecurrente} onChange={props.handleRadioButton} horizontal={true} label={props.Datos.Recurrente.attributes.label} />
                        </div>
                        <div className="row">
                            <DatePicker id="FechaInicial" col="6" value={props.Datos.FechaInicial.value} attributes={props.Datos.FechaInicial.attributes} label={props.Datos.FechaInicial.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'>
                            <div className="col-sm-12 col-md-12">
                                <div id="master-tabla" className="table-responsive  col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <TablaFiltro
                                        keyField={"Linea"}
                                        datos={props.listaDatos}
                                        columnas={props.columnas}
                                        condensed={false}
                                        selectRow={props.selectRow}
                                        modo={props.cellEdit}
                                        borrar={false}
                                        busqueda={true}
                                        nombreCSV={"Asientos"}
                                        botones={props.botonDet}
                                        ingresarDetalle={props.ingresarDetalle}
                                        eliminarDetalle={props.eliminarDetalle}
                                        actTabla={props.actTabla}
                                    />

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}
export default MantAsientoInt;