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

function modalMontoPorc(props) {

    const customStyles = {
        content: {
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            border: "1px solid #ccc",
            background: "#fff",
            overflow: "auto",
            borderRadius: "4px",
            outline: "none",
            padding: "20px",
        },
        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">
                                Monto del Asiento
                            </h2>
                        </div>
                        <div className="modal-body">
                            <div>
                                Los porcentajes asignados a cada cuenta serán basados en el monto que se digite aquí
                            </div>
                            <div className="row">
                                <CajaTextoNumero col="6" id="Monto" type="text" label={props.Datos.Monto.attributes.label} value={props.Datos.Monto.value} attributes={props.Datos.Monto.attributes} onChangeInput={props.onChangeInputPorMonto} onBlur={props.onChangeEditar} onFocus={props.onChangeEditar} onFormatear={props.onFormato} align='right' />
                            </div>
                        </div>
                        <div className="modal-footer">
                            <div class="tooltip2">
                                <span class="tooltiptext2">Aceptar</span>
                                <button
                                    type="button"
                                    className="btn btn-primary"
                                    onClick={props.handleGuardar}
                                >
                                    Aceptar
                                </button>
                            </div>
                            <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(modalMontoPorc))