import React, { Component, Fragment, memo } from "react";
import { withRouter } from "react-router-dom";
import Modal from "react-modal";
import CajaTexto from '../../../components/UI/cajaTexto/cajaTexto.jsx';
import DatePicker from '../../../components/UI/dataPicker/dataPicker.jsx';

import Config from "../../../components/Util/constantes.js";

function modalBitacora(props) {

    const customStyles = {
        content: {
            position: "fixed",
            position: "absolute",
            top: "25%",
            left: "25%",
            right: "25%",
            bottom: "25%",
            with: "50%",
            height: "70%",
            padding: "5px",
        },
        overlay: {
            backgroundColor: "rgba(0, 0, 0, 0.75)",
        },
    };

    return (
        <Fragment>
            <Modal
                isOpen={props.showModal}
                contentLabel={props.contentLabel}
                style={customStyles}
                ariaHideApp={false}
            >
                <div className="">
                    <div className="">
                        <div className="modal-header">
                            <button
                                type="button"
                                className="close"
                                data-dismiss="modal"
                                aria-label="Close"
                                onClick={props.cerrarModal}
                            >
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h2 className="modal-title" id="ModalLabel">
                                Bitácora de modificaciones
                            </h2>
                        </div>
                        <div className="modal-body">
                            <div className="row">
                                <CajaTexto col="12" id="AsientoBi" type="text" label={props.Datos.AsientoBi.attributes.label} value={props.Datos.AsientoBi.value} attributes={props.Datos.AsientoBi.attributes} onChangeInput={() => { }} />                            
                            </div>
                            <div className="row">
                                <CajaTexto col="6" id="DigitadoPorBi" type="text" label={props.Datos.DigitadoPorBi.attributes.label} value={props.Datos.DigitadoPorBi.value} attributes={props.Datos.DigitadoPorBi.attributes} onChangeInput={() => { }} />
                                <CajaTexto col="6" id="NombreDigitadoBi" type="text" label={props.Datos.NombreDigitadoBi.attributes.label} value={props.Datos.NombreDigitadoBi.value} attributes={props.Datos.NombreDigitadoBi.attributes} onChangeInput={() => { }} />
                            </div>
                            <div className="row">
                                <CajaTexto col="6" id="AprobadoPorBi" type="text" label={props.Datos.AprobadoPorBi.attributes.label} value={props.Datos.AprobadoPorBi.value} attributes={props.Datos.AprobadoPorBi.attributes} onChangeInput={() => { }} />
                                <CajaTexto col="6" id="NombreAprobadoBi" type="text" label={props.Datos.NombreAprobadoBi.attributes.label} value={props.Datos.NombreAprobadoBi.value} attributes={props.Datos.NombreAprobadoBi.attributes} onChangeInput={() => { }} />
                            </div>
                            <div className="row">
                                <CajaTexto col="6" id="AplicadoPorBi" type="text" label={props.Datos.AplicadoPorBi.attributes.label} value={props.Datos.AplicadoPorBi.value} attributes={props.Datos.AplicadoPorBi.attributes} onChangeInput={() => { }} />
                                <CajaTexto col="6" id="NombreAplicadoBi" type="text" label={props.Datos.NombreAplicadoBi.attributes.label} value={props.Datos.NombreAplicadoBi.value} attributes={props.Datos.NombreAplicadoBi.attributes} onChangeInput={() => { }} />
                            </div>
                            <div className="row">
                                <CajaTexto col="6" id="AnuladoPorBi" type="text" label={props.Datos.AnuladoPorBi.attributes.label} value={props.Datos.AnuladoPorBi.value} attributes={props.Datos.AnuladoPorBi.attributes} onChangeInput={() => { }} />
                                <CajaTexto col="6" id="NombreAnuladoBi" type="text" label={props.Datos.NombreAnuladoBi.attributes.label} value={props.Datos.NombreAnuladoBi.value} attributes={props.Datos.NombreAnuladoBi.attributes} onChangeInput={() => { }} />
                            </div>
                            <div className="row">
                                <CajaTexto col="6" id="ModificadoPorBi" type="text" label={props.Datos.ModificadoPorBi.attributes.label} value={props.Datos.ModificadoPorBi.value} attributes={props.Datos.ModificadoPorBi.attributes} onChangeInput={() => { }} />
                                <CajaTexto col="6" id="NombreModificadoBi" type="text" label={props.Datos.NombreModificadoBi.attributes.label} value={props.Datos.NombreModificadoBi.value} attributes={props.Datos.NombreModificadoBi.attributes} onChangeInput={() => { }} />
                            </div>
                            <div className="row">
                                <CajaTexto col="6" id="ReversadoPorBi" type="text" label={props.Datos.ReversadoPorBi.attributes.label} value={props.Datos.ReversadoPorBi.value} attributes={props.Datos.ReversadoPorBi.attributes} onChangeInput={() => { }} />
                                <CajaTexto col="6" id="NombreReversadoBi" type="text" label={props.Datos.NombreReversadoBi.attributes.label} value={props.Datos.NombreReversadoBi.value} attributes={props.Datos.NombreReversadoBi.attributes} onChangeInput={() => { }} />
                            </div>
                            <div className="row">
                                <DatePicker id="UltimaActualizacionBi" col="6" value={props.Datos.UltimaActualizacionBi.value} attributes={props.Datos.UltimaActualizacionBi.attributes} label={props.Datos.UltimaActualizacionBi.attributes.label} formatDate={Config.dateformat} handleChange={() => { }} />                                
                            </div>
                        </div>
                        <div className="modal-footer">
                            <div class="tooltip2">
                                <span class="tooltiptext2">Cerrar</span>
                                <button
                                    type="button"
                                    className="btn btn-secondary"
                                    data-dismiss="modal"
                                    onClick={props.cerrarModal}
                                >
                                    Cerrar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </Modal>
        </Fragment>
    );
}
export default withRouter(memo(modalBitacora))