import m from "mithril";

export var gridMountpoints = {
    header: null,
    menubar: null,
    main: null,
    modalhook: null
}
export const maingrid: m.ClosureComponent = (vnode) => {
    let gridstyle = {
        'display': 'grid',
        'grid-template-rows': 'auto auto 1fr',
        'height': '100vh',
        'width': '100vw'
    }
    return {
        view: (vnode) => {
            return [
                m("div", {style: gridstyle},
                    [
                        m("div", {
                            oncreate: (vnode) => { gridMountpoints.header = vnode.dom }, 
                            style: {'grid-row': '1'}
                        }),
                        m("div", {
                            oncreate: (vnode) => { gridMountpoints.menubar = vnode.dom }, 
                            style: {'grid-row': '2'}
                        }),
                        m("div", 
                            {
                                //oncreate: (vnode) => { gridMountpoints.main = vnode.dom }, 
                                style: {'grid-row': "3", 'overflow-y': 'auto', 'height': '100%'}
                            },
                            m("div", 
                                {
                                    oncreate: (vnode) => { gridMountpoints.main = vnode.dom },         
                                    style: {'overflow-y': 'auto', height: 'inherit'}
                                }
                            )
                        )
                    ]
                ),
                m("div#modalhook", {
                    oncreate: (vnode) => { gridMountpoints.modalhook = vnode.dom}
                })
            ]
        }
    }
}