import React, { Fragment, memo } from 'react';
import { withRouter } from 'react-router-dom';
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 ArbolCheck from '../../../components/UI/arboles/arbolCheck.jsx';

function MantCentroCostoInt(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'
                                    resize={"vertical"} />

                            </div>

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

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

        </Fragment>
    );
};
export default (withRouter(memo(MantCentroCostoInt)));