import React, { Fragment } from 'react'

import ComboBox from '../../components/UI/comboBox/combobox.jsx';
import CajaTexto from '../../components/UI/cajaTexto/cajaTexto.jsx';
import DatePicker from '../../components/UI/dataPicker/dataPicker.jsx';
import Botones from '../../components/UI/botonera/headerBotones.js';
import FrmBotones from '../../components/UI/botonera/formBotones.jsx';
import RadioButton from '../../components/UI/radioButton/radiobutton.jsx';
import CajaTextoBusqueda from '../../components/UI/cajaTexto/cajaTextoBusqueda.jsx';
import CheckBox from '../../components/UI/checkBox/checkBox.jsx'
import MonthYearPicker from '../../components/UI/dataPicker/monthYearPicker.jsx';

import Config from "../../components/Util/constantes.js";
import CajaTextoNumero from '../../components/UI/cajaTexto/cajaTextoNumero.jsx';
import ModalBusquedaTree from '../../components/UI/modalBusqueda/modalBusquedaTree.jsx';
import TablaFiltro from '../../components/UI/tablaFiltro/tablaFiltroSort.jsx';
import ModalBusquedaEmp from '../../components/UI/modalBusqueda/modalBusquedaFiltro.jsx';

class parametrosReportes extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {

        const { botones, Datos, titulo, seleccionAsiento, listaTipoAsiento, listaAsientos, handleKeyPress,
            seleccionPeriodoMes, listaOrdenadoPor, seleccionOrdenadoPor, seleccionTipoAsiento, selectedCuentas,
            handleRadioButtonTipo, handleRadioButton, radioOptions, onChangeInputCue, selectModalTree, onRowSelectBusquedaTree,
            cerrarModalTree, seleccionModalTree, listCuentasContTemp, ListCC, handleModalTree, cerrarModalCC, handleModalCC,
            selectModalTreeCC, selectedFormaImp, handleKeyPressCuentaDe, handleKeyPressCuentaAl, listaDatosReporte,
            selectedDatosRep, handleRadioButtonDatosRep, ListaPeriodos, seleccionPeriodo, selectedFormatoMovimiento,
            seleccionTipoCtaGeneral, seleccionTipoCtaEspecifico, ListaTipoCta, ListaSubTipoCta, seleccionTipoAsientoMarca,
            columnasPAR, listaGralPAR, cellEditPAR, selectRowPAR, botonesLista, botonesForm, listaTipoAsientoMarca, seleccionReportes, listaReportes,
            onChangeInputUsuario, handleModalUsuario, selectModalUsuario, onKeyPressUsuario, seleccionModalUsuario, onDoubleClickUsuario, cerrarModalUsuario,
            selectRowUsuario, listaUsuarios, columnasUsuario, botonesAg, tituloTabla, keyField
        } = 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="Asientos" col="6" attributes={Datos.Asientos.attributes} value={seleccionAsiento} label={Datos.Asientos.attributes.label} datos={listaAsientos} onChange={(value) => this.props.handleSelectChange(value, "seleccionAsiento")} />
                                <MonthYearPicker id="fecMesAno" col="6" pvalue={Datos.fecMesAno.value} attributes={Datos.fecMesAno.attributes} label={Datos.fecMesAno.attributes.label} handleChange={this.props.onhandleChangeDate} />
                            </div>

                            <div className="row">
                                <ComboBox id="OrdenadoPor" col="6" attributes={Datos.OrdenadoPor.attributes} value={seleccionOrdenadoPor} label={Datos.OrdenadoPor.attributes.label} datos={listaOrdenadoPor} onChange={(value) => this.props.handleSelectChange(value, "seleccionOrdenadoPor")} />
                            </div>

                            <div className="row">
                                <CheckBox id='MovimientosCb' col="12" attributes={Datos.MovimientosCb.attributes} value={Datos.MovimientosCb.value} label={Datos.MovimientosCb.attributes.label} onChange={this.props.handleCheckBox} />
                            </div>

                            <div className="row">
                                <ComboBox id="ListaReportes" col="12" attributes={Datos.ListaReportes.attributes} value={seleccionReportes} label={Datos.ListaReportes.attributes.label} datos={listaReportes} onChange={(value) => this.props.handleSelectChange(value, "seleccionReportes")} />
                                <MonthYearPicker id="MovimientosDe" col="6" pvalue={Datos.MovimientosDe.value} attributes={Datos.MovimientosDe.attributes} label={Datos.MovimientosDe.attributes.label} handleChange={this.props.onhandleChangeDate} />
                                <MonthYearPicker id="MovimientosAl" col="6" pvalue={Datos.MovimientosAl.value} attributes={Datos.MovimientosAl.attributes} label={Datos.MovimientosAl.attributes.label} handleChange={this.props.onhandleChangeDate} />
                            </div>
                            <div className="row">
                                <CheckBox id='CkUsuarios' col="12" attributes={Datos.CkUsuarios.attributes} value={Datos.CkUsuarios.value} label={Datos.CkUsuarios.attributes.label} onChange={this.props.handleCheckBox} />
                                <CajaTextoBusqueda col="2" id="CodigoUsuarios" type="text" label={Datos.CodigoUsuarios.attributes.label} value={Datos.CodigoUsuarios.value} attributes={Datos.CodigoUsuarios.attributes} onChangeInput={onChangeInputUsuario} onClick={handleModalUsuario} onKeyPress={onKeyPressUsuario} onBlur={() => { }} />
                                <CajaTexto col="4" id="NombreUsuarios" type="text" label={Datos.NombreUsuarios.attributes.label} value={Datos.NombreUsuarios.value} attributes={Datos.NombreUsuarios.attributes} onChangeInput={() => { }} />

                                {/* <RadioButton id="selectedRadioB" col="6" attributes={Datos.RadioTipoImp.attributes} value={selectedCuentas} datos={radioOptions} onChange={handleRadioButtonTipo} horizontal={true} label={Datos.RadioTipoImp.attributes.label} /> */}
                            </div>
                            <div className="row">
                                <CheckBox id='Digitados' col="12" attributes={Datos.Digitados.attributes} value={Datos.Digitados.value} label={Datos.Digitados.attributes.label} onChange={this.props.handleCheckBox} />
                            </div>

                            <div className="row">
                                <DatePicker id="DigitadosDel" col="6" handleChange={this.props.onhandleChangeDate} value={Datos.DigitadosDel.value} attributes={Datos.DigitadosDel.attributes} label={Datos.DigitadosDel.attributes.label} formatDate={Config.dateformat} />
                                <DatePicker id="DigitadosAl" col="6" handleChange={this.props.onhandleChangeDate} value={Datos.DigitadosAl.value} attributes={Datos.DigitadosAl.attributes} label={Datos.DigitadosAl.attributes.label} formatDate={Config.dateformat} />
                            </div>

                            <br />

                            <div className="row">
                                <RadioButton id="selectedCuentas" col="6" attributes={Datos.RadioCuentas.attributes} value={selectedCuentas} datos={radioOptions} onChange={handleRadioButtonTipo} horizontal={true} label={Datos.RadioCuentas.attributes.label} />
                                <RadioButton id="selectedFormatoMovimiento" col="6" attributes={Datos.RadioFormatoMov.attributes} value={selectedFormatoMovimiento} datos={radioOptions} onChange={handleRadioButtonTipo} horizontal={true} label={Datos.RadioFormatoMov.attributes.label} />
                                <ComboBox id="TipoCuenta" col="6" attributes={Datos.TipoCuenta.attributes} value={seleccionTipoAsiento} label={Datos.TipoCuenta.attributes.label} datos={listaTipoAsiento} onChange={(value) => this.props.handleSelectChange(value, "seleccionTipoAsiento")} />
                            </div>

                            <div className="row">
                                <ComboBox id="seleccionPeriodo" col="6" attributes={Datos.ListPeriodo.attributes} value={seleccionPeriodo} label={Datos.ListPeriodo.attributes.label} datos={ListaPeriodos} onChange={(value) => this.props.handleSelectChange(value, "seleccionPeriodo")} />
                            </div>

                            <div className="row">
                                <ComboBox id="seleccionTipoCtaGeneral" col="6" attributes={Datos.TipoCtaGeneral.attributes} value={seleccionTipoCtaGeneral} label={Datos.TipoCtaGeneral.attributes.label} datos={ListaTipoCta} onChange={(value) => this.props.handleSelectChange(value, "seleccionTipoCtaGeneral")} />
                                <ComboBox id="seleccionTipoCtaEspecifico" col="6" attributes={Datos.TipoCtaEspecifico.attributes} value={seleccionTipoCtaEspecifico} label={Datos.TipoCtaEspecifico.attributes.label} datos={ListaSubTipoCta} onChange={(value) => this.props.handleSelectChange(value, "seleccionTipoCtaEspecifico")} />
                            </div>


                            <div className="row">
                                <RadioButton id="selectedDatosRep" col="6" attributes={Datos.RadioDatosRep.attributes} value={selectedDatosRep} datos={listaDatosReporte} onChange={handleRadioButtonDatosRep} horizontal={true} label={Datos.RadioDatosRep.attributes.label} />
                            </div>

                            <div className='row'>
                                <CheckBox id='CkCuentas' col="6" attributes={Datos.CkCuentas.attributes} value={Datos.CkCuentas.value} label={Datos.CkCuentas.attributes.label} onChange={this.props.handleCheckBox} />
                            </div>

                            <div className="row">

                                <div className={"col-sm-6 col-md-6"}>

                                    <div className="row">
                                        <CajaTextoBusqueda col="4" id="Cuenta" type="text" value={Datos.Cuenta.value} label={Datos.Cuenta.attributes.label} attributes={Datos.Cuenta.attributes} onChangeInput={onChangeInputCue} onClick={handleModalTree} onKeyPress={handleKeyPressCuentaDe} onBlur={() => { }} />
                                        <CajaTexto col="8" id="NombreCuenta" type="text" value={Datos.NombreCuenta.value} label={Datos.NombreCuenta.attributes.label} attributes={Datos.NombreCuenta.attributes} onChangeInput={() => { }} />
                                    </div>

                                </div>

                                <div className={"col-sm-6 col-md-6"}>

                                    <div className="row">
                                        <CajaTextoBusqueda col="4" id="CuentaAl" type="text" value={Datos.CuentaAl.value} label={Datos.CuentaAl.attributes.label} attributes={Datos.CuentaAl.attributes} onChangeInput={onChangeInputCue} onClick={handleModalTree} onKeyPress={handleKeyPressCuentaAl} onBlur={() => { }} />
                                        <CajaTexto col="8" id="NombreCuentaAl" type="text" value={Datos.NombreCuentaAl.value} label={Datos.NombreCuentaAl.attributes.label} attributes={Datos.NombreCuentaAl.attributes} onChangeInput={() => { }} />
                                        <FrmBotones col="6" attributes={Datos.BotonAg.attributes} botones={botonesAg} />
                                    </div>

                                </div>

                            </div>

                            <div className="row">
                                <CheckBox id='CkCentroDeCosto' col="12" attributes={Datos.CkCentroDeCosto.attributes} value={Datos.CkCentroDeCosto.value} label={Datos.CkCentroDeCosto.attributes.label} onChange={this.props.handleCheckBox} />
                                <CajaTextoBusqueda col="2" id="CodigoCCosto" type="text" label={Datos.CodigoCCosto.attributes.label} value={Datos.CodigoCCosto.value} attributes={Datos.CodigoCCosto.attributes} onChangeInput={onChangeInputCue} onClick={handleModalCC} onKeyPress={handleKeyPress} onBlur={() => { }} />
                                <CajaTexto col="4" id="NombreCCosto" type="text" label={Datos.NombreCCosto.attributes.label} value={Datos.NombreCCosto.value} attributes={Datos.NombreCCosto.attributes} onChangeInput={() => { }} />

                                {/* <RadioButton id="selectedRadioB" col="6" attributes={Datos.RadioTipoImp.attributes} value={selectedCuentas} datos={radioOptions} onChange={handleRadioButtonTipo} horizontal={true} label={Datos.RadioTipoImp.attributes.label} /> */}
                            </div>
                            <div className='row'>
                                <CheckBox id='CkNivel' col="2" attributes={Datos.CkNivel.attributes} value={Datos.CkNivel.value} label={Datos.CkNivel.attributes.label} onChange={this.props.handleCheckBox} />
                                <CajaTexto col="4" id="Nivel" type="text" label={Datos.Nivel.attributes.label} value={Datos.Nivel.value} attributes={Datos.Nivel.attributes} onChangeInput={this.props.onChangeInputNumero} />
                            </div>

                            <div className="row">
                                <CheckBox id='Numeros' col="12" attributes={Datos.Numeros.attributes} value={Datos.Numeros.value} label={Datos.Numeros.attributes.label} onChange={this.props.handleCheckBox} />
                            </div>

                            <div className="row">
                                <ComboBox id="TipoAsiento" col="6" attributes={Datos.TipoAsiento.attributes} value={seleccionTipoAsiento} label={Datos.TipoAsiento.attributes.label} datos={listaTipoAsiento} onChange={(value) => this.props.handleSelectChange(value, "seleccionTipoAsiento")} />
                                <CajaTexto col="3" id="NumerosDel" type="text" label={Datos.NumerosDel.attributes.label} value={Datos.NumerosDel.value} attributes={Datos.NumerosDel.attributes} onChangeInput={this.props.onChangeInput} />
                                <CajaTexto col="3" id="NumerosAl" type="text" label={Datos.NumerosAl.attributes.label} value={Datos.NumerosAl.value} attributes={Datos.NumerosAl.attributes} onChangeInput={this.props.onChangeInput} />
                                <FrmBotones col="6" attributes={Datos.BotonesForm.attributes} botones={botonesForm} />
                            </div>

                            <div className="row">
                                <ComboBox id="TipoAsientoMarca" col="6" attributes={Datos.TipoAsientoMarca.attributes} value={seleccionTipoAsientoMarca} label={Datos.TipoAsientoMarca.attributes.label} datos={listaTipoAsientoMarca} onChange={(value) => this.props.handleSelectChange(value, "seleccionTipoAsientoMarca")} />
                                <CajaTexto col="3" id="RangoDel" type="text" label={Datos.RangoDel.attributes.label} value={Datos.RangoDel.value} attributes={Datos.RangoDel.attributes} onChangeInput={this.props.onChangeInput} />
                                <CajaTexto col="3" id="RangoAl" type="text" label={Datos.RangoAl.attributes.label} value={Datos.RangoAl.value} attributes={Datos.RangoAl.attributes} onChangeInput={this.props.onChangeInput} />
                            </div>

                            <div className="row">
                                <div className="col-sm-12 col-md-12" style={{ display: Datos.TablaParametros.attributes.hidden }}>
                                    <div id="master-tabla" className="table-responsive  col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                        <TablaFiltro
                                            columnas={columnasPAR}
                                            datos={listaGralPAR}
                                            keyField={keyField}
                                            modo={cellEditPAR}
                                            titulo={tituloTabla}
                                            //rowEvents={props.rowEventsAS}
                                            selectRow={selectRowPAR}
                                            //rowStyle={props.rowStyleAP}
                                            nombreCSV={"ListaParametros"}
                                            botonesLista={botonesLista}
                                            botones={true}
                                            busqueda={true}
                                            muestraTodo={false}
                                        />
                                    </div>
                                </div>
                            </div>
                            <div className="row">
                                <CajaTexto col="6" id="Referencia" type="text" label={Datos.Referencia.attributes.label} value={Datos.Referencia.value} attributes={Datos.Referencia.attributes} onChangeInput={this.props.onChangeInput} />
                                <CajaTexto col="6" id="Documento" type="text" label={Datos.Documento.attributes.label} value={Datos.Documento.value} attributes={Datos.Documento.attributes} onChangeInput={this.props.onChangeInput} />
                            </div>

                            <div className='row'>
                                <CajaTexto col="6" id="FolioInicial" type="text" label={Datos.FolioInicial.attributes.label} value={Datos.FolioInicial.value} attributes={Datos.FolioInicial.attributes} onChangeInput={this.props.onChangeInputNumero} />
                            </div>

                            <div className="row">
                                <MonthYearPicker id="Periodo" col="6" pvalue={this.props.Datos.Periodo.value} attributes={this.props.Datos.Periodo.attributes} label={this.props.Datos.Periodo.attributes.label} handleChange={this.props.onhandleChangeDate} />

                                <CheckBox id='ImprimirLogo' col="3" attributes={Datos.ImprimirLogo.attributes} value={Datos.ImprimirLogo.value} label={Datos.ImprimirLogo.attributes.label} onChange={this.props.handleCheckBox} />
                                <CheckBox id='Consolidado' col="3" attributes={Datos.Consolidado.attributes} value={Datos.Consolidado.value} label={Datos.Consolidado.attributes.label} onChange={this.props.handleCheckBox} />

                                <CheckBox id='CkOcultaDocumentos' col="3" attributes={Datos.CkOcultaDocumentos.attributes} value={Datos.CkOcultaDocumentos.value} label={Datos.CkOcultaDocumentos.attributes.label} onChange={this.props.handleCheckBox} />

                                <CheckBox id='CkDescCrece' col="3" attributes={Datos.CkDescCrece.attributes} value={Datos.CkDescCrece.value} label={Datos.CkDescCrece.attributes.label} onChange={this.props.handleCheckBox} />

                                <CheckBox id='MostrarCuentasCero' col="3" attributes={Datos.MostrarCuentasCero.attributes} value={Datos.MostrarCuentasCero.value} label={Datos.MostrarCuentasCero.attributes.label} onChange={this.props.handleCheckBox} />

                                <CheckBox id='ImprimeFH' col="3" attributes={Datos.ImprimeFH.attributes} value={Datos.ImprimeFH.value} label={Datos.ImprimeFH.attributes.label} onChange={this.props.handleCheckBox} />
                            </div>

                        </div>
                    </div>
                </div>

                <ModalBusquedaTree
                    id={"ModalCuentas"}
                    selectedModal={selectModalTree}
                    contentLabel={'selectedBusquedasTree'}
                    label={'Catálogo'}
                    onSelectedRow={onRowSelectBusquedaTree}
                    cerrarModal={cerrarModalTree}
                    seleccionModal={seleccionModalTree}
                    maxDepth={5}
                    carga_ListTree={() => { }}
                    listatree={listCuentasContTemp}
                />

                <ModalBusquedaTree
                    id="ModalCC"
                    selectedModal={selectModalTreeCC}
                    contentLabel={'selectedBusquedasTree'}
                    label={'Lista de Centros de Costo'}
                    onSelectedRow={onRowSelectBusquedaTree}
                    cerrarModal={cerrarModalCC}
                    seleccionModal={seleccionModalTree}
                    maxDepth={5}
                    carga_ListTree={() => { }}
                    listatree={ListCC}
                />
                <ModalBusquedaEmp
                    selectedModal={selectModalUsuario}
                    contentLabel={'selectedBusquedasUsuario'}
                    datos={listaUsuarios}
                    id={'ID'}
                    columnas={columnasUsuario}
                    striped={false}
                    hover={true}
                    condensed={false}
                    selectRow={selectRowUsuario}
                    onDoubleClick={onDoubleClickUsuario}
                    label={'Lista de Usuarios'}
                    cerrarModal={cerrarModalUsuario}
                    seleccionModal={seleccionModalUsuario}
                    verLHOC={false}
                    nombreCSV={'BusquedaUsuarios'}
                />
            </Fragment>
        );
    }
}

export default parametrosReportes