import m from "mithril"


interface iTabDef {
    tabname: string
    tabview: m.ComponentTypes
}

type TabDef = [string, m.ComponentTypes]

export interface iTabView {
    tabviews: TabDef[]
}

export const TabView: m.ClosureComponent<iTabView> = (vnode) => {
    let tv = {}
    vnode.attrs.tabviews.forEach((item: TabDef) => {
        tv[item[0]] = item[1]
    })
    
    let currTab = ""
    function changeview(e) {
        currTab = e.target.value
    }
    return {
        view: (vnode) => {
            return m("div", {style: {display: 'grid', 'grid-template-rows': "auto 1fr", height: '100%'}}, [
                m("div.w3-bar.w3-theme.w3-border-bottom.w3-border-theme.w3-theme-action.w3-small",
                    Object.keys(tv).map((key) => {
                        if (currTab == "") {currTab = key}
                        let c = (key == currTab) ? ".w3-theme-light" : ""
                        return m("button.w3-bar-item.w3-button" + c, {value: key, onclick: changeview}, key)
                    })
                ),
                m("div", m(tv[currTab]))
            ])
        }
    }
}