"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DialogFooter = exports.DialogContent = exports.DialogHeader = exports.Dialog = exports.DialogRootProvider = void 0;
var React = require("react");
var react_dom_1 = require("react-dom");
var recoil_1 = require("recoil");
var typestyle_1 = require("typestyle");
var colors_1 = require("../utils/colors");
var cn = {
    root: typestyle_1.style({
        zIndex: 1000
    }),
    backdrop: typestyle_1.style({
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: colors_1.colors.backdrop,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        cursor: 'pointer'
    }),
    container: typestyle_1.style({
        borderRadius: 2,
        backgroundColor: colors_1.colors.paper,
        boxShadow: "0px 6px 15px 0px " + colors_1.colors.shadow,
        cursor: 'initial',
        width: 400,
        maxWidth: '100%'
    }),
    header: typestyle_1.style({
        padding: 16,
        textAlign: 'center',
        fontSize: '1.25em'
    }),
    footer: typestyle_1.style({
        marginTop: 16,
        borderTop: "1px solid " + colors_1.colors.border,
        padding: 8,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'flex-end',
        $nest: {
            '&>*': {
                marginLeft: 8
            }
        }
    })
};
var dialogRootAtom = recoil_1.atom({
    key: 'dialogRootAtom',
    default: null
});
/**
 * シングルトン
 */
function DialogRootProvider() {
    var setDialogRoot = recoil_1.useSetRecoilState(dialogRootAtom);
    return React.createElement("div", { ref: setDialogRoot, className: cn.root });
}
exports.DialogRootProvider = DialogRootProvider;
function Dialog(props) {
    var dialogRoot = recoil_1.useRecoilValue(dialogRootAtom);
    if (!props.open) {
        return null;
    }
    if (!dialogRoot) {
        console.error('dialogRoot がマウントされていません');
        return null;
    }
    return react_dom_1.createPortal(React.createElement("div", { className: cn.backdrop, onClick: function (event) {
            if (event.target === event.currentTarget) {
                props.onClose();
            }
        } },
        React.createElement("div", { className: cn.container }, props.children)), dialogRoot);
}
exports.Dialog = Dialog;
function DialogHeader(props) {
    return (React.createElement("div", { className: typestyle_1.classes(props.className, cn.header) }, props.children));
}
exports.DialogHeader = DialogHeader;
function DialogContent(props) {
    return React.createElement("div", { className: props.className }, props.children);
}
exports.DialogContent = DialogContent;
function DialogFooter(props) {
    return (React.createElement("div", { className: typestyle_1.classes(props.className, cn.footer) }, props.children));
}
exports.DialogFooter = DialogFooter;
//# sourceMappingURL=Dialog.js.map