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 TextArea from '../../../components/UI/textArea/textArea.jsx';
import CheckBox from '../../../components/UI/checkBox/checkBox.jsx';

function modalPlantilla(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">
                                Guardar como plantilla no recurrente
                            </h2>
                        </div>
                        <div className="modal-body">
                            <div className="row">
                                <CajaTexto col="6" id="NombrePl" type="text" label={props.Datos.NombrePl.attributes.label} value={props.Datos.NombrePl.value} attributes={props.Datos.NombrePl.attributes} onChangeInput={props.onChangeInput} />
                                <TextArea id='DescripcionPl' col='12' value={props.Datos.DescripcionPl.value} label={props.Datos.DescripcionPl.attributes.label} attributes={props.Datos.DescripcionPl.attributes} onChangeInput={props.onChangeInput} rows='3' />
                            </div>
                            <div className='row'>
                                <CheckBox id='TipoPl' col="6" attributes={props.Datos.TipoPl.attributes} value={props.Datos.TipoPl.value} label={props.Datos.TipoPl.attributes.label} onChange={props.handleCheckBox} />
                                <CheckBox id='EstadoPl' col="6" attributes={props.Datos.EstadoPl.attributes} value={props.Datos.EstadoPl.value} label={props.Datos.EstadoPl.attributes.label} onChange={props.handleCheckBox} />
                            </div>
                            <div className='row'>
                                <CheckBox id='DescripcionPlCk' col="6" attributes={props.Datos.DescripcionPlCk.attributes} value={props.Datos.DescripcionPlCk.value} label={props.Datos.DescripcionPlCk.attributes.label} onChange={props.handleCheckBox} />
                                <CajaTexto col="6" id="DescripcionPl2" type="text" label={props.Datos.DescripcionPl2.attributes.label} value={props.Datos.DescripcionPl2.value} attributes={props.Datos.DescripcionPl2.attributes} onChangeInput={props.onChangeInput} />
                            </div>
                            <div className='row'>
                                <CheckBox id='MontosPl' col="6" attributes={props.Datos.MontosPl.attributes} value={props.Datos.MontosPl.value} label={props.Datos.MontosPl.attributes.label} onChange={props.handleCheckBox} />
                                <CheckBox id='DocPorLineaPl' col="6" attributes={props.Datos.DocPorLineaPl.attributes} value={props.Datos.DocPorLineaPl.value} label={props.Datos.DocPorLineaPl.attributes.label} onChange={props.handleCheckBox} />
                            </div>
                            <div className='row'>
                                <CheckBox id='DescPorLineaPl' col="6" attributes={props.Datos.DescPorLineaPl.attributes} value={props.Datos.DescPorLineaPl.value} label={props.Datos.DescPorLineaPl.attributes.label} onChange={props.handleCheckBox} />
                                <CheckBox id='FechaPorLineaPl' col="6" attributes={props.Datos.FechaPorLineaPl.attributes} value={props.Datos.FechaPorLineaPl.value} label={props.Datos.FechaPorLineaPl.attributes.label} onChange={props.handleCheckBox} />
                            </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 class="tooltip2">
                                <span class="tooltiptext2">Guardar</span>
                                <button
                                    type="button"
                                    className="btn btn-primary"
                                    onClick={props.handleGuardar}
                                >
                                    Guardar
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </Modal>
        </Fragment>
    );
}
export default withRouter(memo(modalPlantilla))