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 CheckBox from '../../../components/UI/checkBox/checkBox.jsx';
import CatalogoCheck from '../../../components/UI/arboles/arbolCheck.jsx'
const insertarMasivoInt = (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-md-6">
                                <div className='row'>
                                    <CajaTexto col="12" id="Cuenta" type="text" label={props.Datos.Cuenta.attributes.label} value={props.Datos.Cuenta.value} attributes={props.Datos.Cuenta.attributes} onChangeInput={props.onChangeInput} />
                                </div>
                                <div className='row'>
                                    <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} />
                                </div>
                                <div className='row'>
                                    <CheckBox id='UtilizarNombreCuentaPadre' col="12" attributes={props.Datos.UtilizarNombreCuentaPadre.attributes} value={props.Datos.UtilizarNombreCuentaPadre.value} label={props.Datos.UtilizarNombreCuentaPadre.attributes.label} onChange={props.handleCheckBox} />
                                </div>
                            </div>
                            <div className="col-md-6">
                                <CatalogoCheck
                                    id={"listaCuentasCk"}
                                    label={"Catálogo"}
                                    ListaDatos={props.listCuentasCont}
                                    checked={props.listChecked}
                                    expanded={props.listExpanded}
                                    onCheck={props.handleCheck}
                                    onExpand={props.handelExp}
                                    noCascada={true}
                                    showExpandAll={true}
                                    col={12}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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