import m from "mithril"
import stream from "mithril/stream"
import {
    Toolbar,
    ToolbarTitle,
    Shadow,
    List,
    ListTile,
    Search,
    IconButton
} from "polythene-mithril"
import Dept from "../../models/beta/Dept"

const barsIcon = "<svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z\" fill=\"#fff\"/></svg>"
const backIcon = "<svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1664 896v128q0 53-32.5 90.5t-84.5 37.5h-704l293 294q38 36 38 90t-38 90l-75 76q-37 37-90 37-52 0-91-37l-651-652q-37-37-37-90 0-52 37-91l651-650q38-38 91-38 52 0 90 38l75 74q38 38 38 91t-38 91l-293 293h704q52 0 84.5 37.5t32.5 90.5z\"/></svg>"
const searchIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>"

const searchBox = {
    view: function() {
        return m(Search, {
            textfield: {label: "Search"},
            buttons: {
                none: {
                    after: m(IconButton, {
                        icon: {svg: m.trust(searchIcon)},
                        inactive: true
                    })
                }
            }
        })
    }
}

const menuList = {
    oninit: function(vnode) {
        const show = stream(false)
        vnode.state = {
            show
        }
    },
    view: function(vnode) {
        const state = vnode.state
        const show = state.show()
        return m("div", [
            m(Toolbar, {
                style: {
                    position: "fixed",
                    zIndex: "11",
                    width: "100%",
                    backgroundColor: "rgba(255, 255, 255, .93)"
                }
            }, [
                m("#bars", {
                    style: {cursor: "pointer", display: "inline-block", marginLeft: "1em"},
                    onclick: function() {
                        this.classList.toggle("change")
                        state.show(!state.show())
                    }
                }, [
                    m(".bar1"),
                    m(".bar2"),
                    m(".bar3")
                ]),
                m(ToolbarTitle, {
                    text: vnode.attrs.title
                })
            ]),
            m("#menu", {
                style: {
                    left: show ? "0" : "-100%"
                }
            }, [
                m(Shadow),
                m(List, {
                    id: "menu-list",
                    tiles: [
                        m(ListTile, {
                            title: "All Users",
                            hoverable: true,
                            events: {
                                onclick: function() {
                                    m.route.set("/beta/users")
                                }
                            }
                        }),
                        m(ListTile, {
                            header: true,
                            title: "Department List"
                        }),
                        vnode.attrs.list.map(function(o) {
                            return m(ListTile, {
                                title: o.name,
                                hoverable: true,
                                events: {
                                    onclick: function() {
                                        state.show(false)
                                        document.getElementById("bars")
                                        .classList.toggle("change")
                                        m.route.set("/beta/departments/" + o.id)
                                    }
                                }
                            })
                        })
                    ]
                })
            ]),
            m("#menu-overlay", {
                style: {
                    opacity: ".4",
                    display: show ? "block" : "none"
                },
                onclick: function() {
                    if (show) {
                        state.show(false)
                        document.getElementById("bars")
                        .classList.toggle("change")
                    }
                }
            })
        ])
    }
}

export default menuList