import React, { Component } from "react";

require("./Modal.scss");

const times = "×";

export const ModalButtonBar = (props) => {
    return <div className="ModalButtonBar">{ props.children }</div>
}

export const ModalContent = (props) => {
    return <div className="ModalContent">{ props.children }</div>
}

export const ModalTitle = (props) => {
    return <div className="ModalHeader">{ props.children }</div>
}


//onClose
//onShow

function cancelClick(e) {
    e.preventDefault();
    e.stopPropagation();
}

//TODO sizes + size styles
export default (props) => {
    let className = "Modal " + (props.size || "normal");

    if (!props.show) {
        //do not show anything
        return null;
    }

    let button = null;
    if (props.closeButton) {
        button = <button type="button" onClick={ props.onClose }>{ times }</button>
    }

    return (
        <div className="ModalWrap" onKeyPress={ (e) => console.warn(e.key) } onClick={ props.onClose }>
            <div className={ className } onKeyPress={ (e) => console.warn(e.key) } onClick={ cancelClick }>
                { props.children }
                { button }
            </div>
        </div>
    );
}

