import React, { Fragment, memo,useState } from 'react';
//Componentes
import Botones from '../../../components/UI/botonera/headerBotones.js';
import BotonArriba from '../../../components/UI/botonArriba/botonArriba.jsx';
import { Tabs, Tab } from "react-bootstrap";
import General  from './datosGenerales.jsx';
import PeriodoFiscal  from './peridodoFiscal.jsx';


function mantEmpresasInt(props) {
    const [tabActivo, setTabActivo] = useState('general-tab');
    const handleTabClick = (id) => {
        //console.log('id tab', id);
        setTabActivo(id);
        // setState({tabActivo: id});
    };    
  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'>
                    <Tabs
                    defaultActiveKey={'general-tab'}
                    activeKey={tabActivo}
                    id="CallCenterDetalle"
                    onSelect={handleTabClick}
                    className="nav-tabs2"
                >
                    <Tab eventKey="general-tab" title={'Datos Generales'} style={{ opacity: '100' }}>
                        <General
                            id={'general'}
                            labelledby={'general-tab"'}
                            Datos={props.Datos}
                            onChangeInput={props.onChangeInput}
                            listaCorporacion = {props.listaCorporacion}
                            selectedOptionCorp={props.selectedOptionCorp}
                            onhandleSelectedCorporacion={props.onhandleSelectedCorporacion}
                            handleCheckBox={props.handleCheckBox}
                            botonesFoto={props.botonesFoto}
                            hiddenFileInput={props.hiddenFileInput}
                            cargaArchivoFoto={props.cargaArchivoFoto}
                            fotoSrc={props.fotoSrc}
                            verBotonesFoto={props.verBotonesFoto}
                            onhandleSelectedSAPTipoBD={props.onhandleSelectedSAPTipoBD}
                            selectedSAPTipoBD={props.selectedSAPTipoBD}
                            listaTipoBaseDatos={props.listaTipoBaseDatos}

                        />
                    </Tab>
                    <Tab eventKey="periodoFiscal-tab" title={'Período Fiscal'} style={{ opacity: '100' }}>
                        <PeriodoFiscal
                            id={'periodoFiscal'}
                            labelledby={'periodoFiscal-tab"'}
                            Datos={props.Datos}
                            onhandleChangeDate={props.onhandleChangeDate}
                            onChangeInput={props.onChangeInput}
                            handleModalTree={props.handleModalTree}
                            handleModal={props.handleModal}
                        />
                    </Tab>
                </Tabs>

                </div>
            </div>
        </div>
    </div>
    <BotonArriba Delay={10} Visible={100} />
</Fragment>
  );
};
export default memo(mantEmpresasInt);