import React, { Fragment, memo, useState } from 'react';
//Componentes
import Botones from '../../../components/UI/botonera/headerBotones.js';
import CajaTexto from '../../../components/UI/cajaTexto/cajaTexto.jsx';
import TextArea from '../../../components/UI/textArea/textArea.jsx';
import TablaFiltro from '../../../components/UI/tablaFiltro/tablaFiltroSort.jsx';
import CatalogoCheck from '../../../components/UI/arboles/arbolCheck.jsx'
import Division from '../../../components/UI/division/division.jsx';
function mantCentroUtilidadInt(props) {
    return (
        <Fragment>
            <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'>
                            <div className="col-lg-6">
                                <CajaTexto col="12" 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="12" id="Nombre" type="text" label={props.Datos.Nombre.attributes.label} value={props.Datos.Nombre.value} attributes={props.Datos.Nombre.attributes} onChangeInput={props.onChangeInput} />
                                <CajaTexto col="12" id="Titulo" type="text" label={props.Datos.Titulo.attributes.label} value={props.Datos.Titulo.value} attributes={props.Datos.Titulo.attributes} onChangeInput={props.onChangeInput} />

                                <TextArea id='Descripcion' col='12'
                                    value={props.Datos.Descripcion.value}
                                    label={props.Datos.Descripcion.attributes.label}
                                    attributes={props.Datos.Descripcion.attributes}
                                    onChangeInput={props.onChangeInput} rows='3' />

                            </div>

                            <div className="col-lg-6">
                                <CatalogoCheck
                                    id={"listaCuentasCk"}
                                    label={"Catálogo de Cuentas"}
                                    ListaDatos={props.listCuentasCont}
                                    checked={props.listChecked}
                                    expanded={props.listExpanded}
                                    onCheck={props.handleCheck}
                                    onExpand={props.handelExp}
                                    noCascada={true}
                                    showExpandAll={true}
                                    col={12}
                                    MostrarScroll={true}
                                    filterText={props.filterText}
                                    onFilterChange={props.onFilterChange}
                                    onClick={props.handleOnClick}
                                />
                            </div>

                        </div>
             {/*}           <div className="row">
                            <Division id="DivCC" label={props.Datos.DivCC.attributes.label} attributes={props.Datos.DivCC.attributes} />
    </div>*/}
                        <div className='row'>
                            <div className={"col-sm-12 col-md-12"}>
                                <div className="form-group">
                                    <label htmlFor={'CCC'}>{'Centros de Costo'}</label>
                                    <div className="row" id='CCC'>
                                        <TablaFiltro
                                            columnas={props.columnas}
                                            datos={props.listaDatos}
                                            keyField={"ID"}
                                            modo={props.cellEditCC}
                                            selectRow={props.selectRow}
                                            condensed={false}
                                            borrar={false}
                                            busqueda={true}
                                            nombreCSV={"Presupuesto"}
                                            conFiltro={true}
                                            subTituloBotones={""}
                                            rowEvents={props.rowEvents}                                            
                                        />
                                    </div>
                                </div>
                            </div>

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

        </Fragment >
    );
};
export default memo(mantCentroUtilidadInt);