import React, { Component, memo, Fragment } from 'react';
import { withRouter } from "react-router-dom";
import CajaTexto from '../../../components/UI/cajaTexto/cajaTexto.jsx';
import TextArea from '../../../components/UI/textArea/textArea.jsx';
import ComboBox from '../../../components/UI/comboBox/combobox.jsx';
import CheckBox from '../../../components/UI/checkBox/checkBox.jsx';
import Botones from '../../../components/UI/botonera/headerBotonesOld.js';
function datosGenerales(props) {
    return (
        <Fragment>
            <div className="col-md-12">
                <div className="content">
                    <div className="content-box">
                        <div className="row">
                            <div className='row'>
                                <div className="col-sm-4 ">
                                    <div className="text-center">
                                        <img className="profile-pic" src={props.fotoSrc}></img>
                                    </div>
                                    <div class="col-8"><strong><h6>Se recomienda que las dimensiones de la imagen sean de 150x150 o que no las supere.</h6></strong></div>
                                    <div className="col-md-6 div-fotos" style={props.verBotonesFoto}>
                                        <Botones
                                            botones={props.botonesFoto}
                                        />
                                    </div>
                                </div>
                                <CajaTexto col="4" id="Id" type="text" label={props.Datos.Id.attributes.label} value={props.Datos.Id.value} attributes={props.Datos.Id.attributes} onChangeInput={props.onChangeInput} />
                                <CajaTexto col="4" 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="4" id="Cedula_Juridica" type="text" label={props.Datos.Cedula_Juridica.attributes.label} value={props.Datos.Cedula_Juridica.value} attributes={props.Datos.Cedula_Juridica.attributes} onChangeInput={props.onChangeInput} />
                                <CajaTexto col="4" id="Comentario" type="text" label={props.Datos.Comentario.attributes.label} value={props.Datos.Comentario.value} attributes={props.Datos.Comentario.attributes} onChangeInput={props.onChangeInput} />
                            </div>
                            <div className='row'>
                                <ComboBox id="cmbCorporacion" col="6" attributes={props.Datos.Corporacion_id.attributes} value={props.selectedOptionCorp} label={props.Datos.Corporacion_id.attributes.label} datos={props.listaCorporacion} onChange={props.onhandleSelectedCorporacion} />
                                <CajaTexto col="6" id="EMail" type="text" label={props.Datos.EMail.attributes.label} value={props.Datos.EMail.value} attributes={props.Datos.EMail.attributes} onChangeInput={props.onChangeInput} />
                            </div>
                            <div className='row'>
                                <CajaTexto col="6" id="Telefono" type="text" label={props.Datos.Telefono.attributes.label} value={props.Datos.Telefono.value} attributes={props.Datos.Telefono.attributes} onChangeInput={props.onChangeInput} />
                                <CheckBox id='UtilizaCentroCosto' col="26" attributes={props.Datos.UtilizaCentroCosto.attributes} value={props.Datos.UtilizaCentroCosto.value} label={props.Datos.UtilizaCentroCosto.attributes.label} onChange={props.handleCheckBox} />
                            </div>
                            <div className='row'>
                                <TextArea col="12" id="Direccion" type="text" label={props.Datos.Direccion.attributes.label} value={props.Datos.Direccion.value} attributes={props.Datos.Direccion.attributes} onChangeInput={props.onChangeInput} rows='3' />
                            </div>
                            <div className='row'>
                                <CajaTexto col="12" id="Nombre_Comercial" type="text" label={props.Datos.Nombre_Comercial.attributes.label} value={props.Datos.Nombre_Comercial.value} attributes={props.Datos.Nombre_Comercial.attributes} onChangeInput={props.onChangeInput} />
                            </div>
                            <div className='row'>
                                <CajaTexto col="12" id="SAPServer" type="text" label={props.Datos.SAPServer.attributes.label} value={props.Datos.SAPServer.value} attributes={props.Datos.SAPServer.attributes} onChangeInput={props.onChangeInput} />
                            </div>
                            <div className='row'>
                                <CajaTexto col="12" id="SAPCompany" type="text" label={props.Datos.SAPCompany.attributes.label} value={props.Datos.SAPCompany.value} attributes={props.Datos.SAPCompany.attributes} onChangeInput={props.onChangeInput} />
                            </div>
                            <div className='row'>
                                <CajaTexto col="12" id="SAPUserName" type="text" label={props.Datos.SAPUserName.attributes.label} value={props.Datos.SAPUserName.value} attributes={props.Datos.SAPUserName.attributes} onChangeInput={props.onChangeInput} />
                            </div>
                            <div className='row'>
                                <CajaTexto col="12" id="SAPPassword" type="password" label={props.Datos.SAPPassword.attributes.label} value={props.Datos.SAPPassword.value} attributes={props.Datos.SAPPassword.attributes} onChangeInput={props.onChangeInput} />
                            </div>
                            <div className='row'>
                                <ComboBox id="cmbSAPTipoBD" col="6" attributes={props.Datos.SAPTipoBD.attributes} value={props.selectedSAPTipoBD} label={props.Datos.SAPTipoBD.attributes.label} datos={props.listaTipoBaseDatos} onChange={props.onhandleSelectedSAPTipoBD} />
                            </div>
                            <div className='row'>
                                <CajaTexto col="12" id="Site" type="text" label={props.Datos.Site.attributes.label} value={props.Datos.Site.value} attributes={props.Datos.Site.attributes} onChangeInput={props.onChangeInput} />
                            </div>                            

                        </div>
                    </div>
                </div>
            </div>
            <div className='d-none'>
                <input type='file' id='ArchivoFoto' ref={props.hiddenFileInput} onChange={(e) => props.cargaArchivoFoto(e)} />
            </div>
        </Fragment>
    );
};
export default (withRouter(memo(datosGenerales)));