import m from "mithril"
import stream from "mithril/stream"
import {
    Card,
    ListTile,
    Icon,
    Search,
    Shadow,
    IconButton
} from "polythene-mithril"
import menuList from "./menuList"
import Dept from "../../models/beta/Dept"
import User from "../../models/beta/User"

const angleDownIcon = "<svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z\"/></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 clearIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\">"

export const userList = {
    view: function(vnode) {
        Dept.current = _.find(Dept.list, function(d) {return d.id == vnode.attrs.id})
        Dept.current.users = _.filter(User.list, function(u) {return u.dept == Dept.current.id})
        return [
            m(menuList, {title: Dept.current.name, list: Dept.list}),
            m(".wrapper-body", {
                style: {
                    display: "flex",
                    flexFlow: "row wrap",
                    margin: "0 auto",
                    paddingTop: "64px"
                }
            }, _.filter(Dept.current.users, function(u) {return u.super}).map(function(user) {
                return m(superList, {user})
            }))
        ]
    }
}

export const userAll = {
    oninit: function(vnode) {
        var show = stream(false)
        var search = ""
        vnode.state = {show, search}
    },
    view: function(vnode) {
        var state = vnode.state
        var show = state.show()
        var search = state.search
        return [
            m(menuList, {title: "User List", list: Dept.list}),
            m(".wrapper-body", {
                style: {
                    display: "flex",
                    flexFlow: "row wrap",
                    margin: "0 auto",
                    paddingTop: "64px"
                }
            }, [
                m(Search, {
                    style: {
                        margin: "1em"
                    },
                    textfield: {
                        label: "Search",
                        value: state.search,
                        onChange: function({value}) {
                            state.search = value
                        }
                    },
                    before: m(Shadow),
                    buttons: {
                        none: {
                            before: m(IconButton, {
                                icon: {svg: m.trust(searchIcon)},
                                inactive: true
                            }),
                            after: m(IconButton, {
                                icon: {svg: m.trust(clearIcon)},
                                events: {
                                    onclick: function() {
                                        state.search = ""
                                    }
                                }
                            })
                        },
                        focus: {
                            before: m(IconButton, {
                                icon: {svg: m.trust(searchIcon)},
                                inactive: true
                            }),
                            after: m(IconButton, {
                                icon: {svg: m.trust(clearIcon)},
                                events: {
                                    onclick: function() {
                                        state.search = ""
                                    }
                                }
                            })
                        },
                        dirty: {
                            before: m(IconButton, {
                                icon: {svg: m.trust(searchIcon)},
                                inactive: true
                            }),
                            after: m(IconButton, {
                                icon: {svg: m.trust(clearIcon)},
                                events: {
                                    onclick: function() {
                                        state.search = ""
                                    }
                                }
                            })
                        },
                        focus_dirty: {
                            before: m(IconButton, {
                                icon: {svg: m.trust(searchIcon)},
                                inactive: true
                            }),
                            after: m(IconButton, {
                                icon: {svg: m.trust(clearIcon)},
                                events: {
                                    onclick: function() {
                                        state.search = ""
                                    }
                                }
                            })
                        }
                    }
                }),
                User.list.map(function(user) {
                    return m(superList, {user})
                })
            ])
        ]
    }
}

const superList = {
    oninit: function(vnode) {
        var show = stream(false)
        vnode.state = {show}
    },
    view: function(vnode) {
        var state = vnode.state
        var show = state.show()
        var user = vnode.attrs.user
        return m(Card, {
            style: {
                flexBasis: "100%",
                webkitTransition: "all .2s cubic-bezier(0, 0, .6, 1)",
                mozTransition: "all .2s cubic-bezier(0, 0, .6, 1)",
                oTransition: "all .2s cubic-bezier(0, 0, .6, 1)",
                transition: "all .2s cubic-bezier(0, 0, .6, 1)",
            },
            content: [{
                text: {
                    content: [
                        m(ListTile, {
                            front: m(Icon, {
                                avatar: true,
                                size: "large",
                                src: "../../img/yayasan.png"
                            }),
                            title: user.name,
                            subContent: show ? m("div", {
                                style: {fontSize: "smaller", marginTop: "1em"}
                            }, [
                                m("div", [
                                    "Alamat: ",
                                    user.address
                                ]),
                                m("div", [
                                    "TTL: ",
                                    user.birth
                                ]),
                                m("div", [
                                    "Telp.: ",
                                    user.phone
                                ]),
                                m("div", [
                                    "Email: ",
                                    user.mail
                                ]),
                                m("div", [
                                    "Tgl. Masuk: ",
                                    user.workEntry
                                ]),
                                m("div", [
                                    "Lama Kerja: ",
                                    user.workPeriod
                                ]),
                                m("div", [
                                    "Pendidikan: ",
                                    user.education
                                ])
                            ]) : null
                        }),
                        m("div", {
                            style: {textAlign: "center"}
                        }, m(Icon, {
                            element: "a",
                            svg: {content: m.trust(angleDownIcon), style: {color: "rgb(0, 145, 234)"}},
                            style: {
                                // opacity: ".5",
                                cursor: "pointer",
                                borderRadius: "50%",
                                transform: show ? "rotateX(180deg)" : "rotateX(0)",
                                webkitTransition: "all .25s linear",
                                mozTransition: "all .25s linear",
                                oTransition: "all .25s linear",
                                transition: "all .25s linear"
                            },
                            events: {
                                onclick: function() {
                                    state.show(!state.show())
                                }
                            }
                        })),
                        show ? _.filter(
                            Dept.current.users,
                            function(u) {return !u.super}
                        ).map(function(staff) {return m(staffList, {staff})}) : null
                    ]
                }
            }]
        })
    }
}

const staffList = {
    oninit: function(vnode) {
        var peek = stream(false)
        vnode.state = {peek}
    },
    view: function(vnode) {
        var state = vnode.state
        var peek = state.peek()
        var staff = vnode.attrs.staff
        return m(Card, {
            style: {
                width: "100%",
                webkitTransition: "all .1s cubic-bezier(0, 0, .6, 1)",
                mozTransition: "all .1s cubic-bezier(0, 0, .6, 1)",
                oTransition: "all .1s cubic-bezier(0, 0, .6, 1)",
                transition: "all .1s cubic-bezier(0, 0, .6, 1)",
            },
            content: [{
                text: {
                    content: [
                        m(ListTile, {
                            front: m(Icon, {
                                avatar: true,
                                size: "large",
                                src: "../../img/yayasan.png"
                            }),
                            title: staff.name,
                            subContent: peek ? m("div", {
                                style: {fontSize: "smaller", marginTop: "1em"}
                            }, [
                                m("div", [
                                    "Alamat: ",
                                    staff.address
                                ]),
                                m("div", [
                                    "TTL: ",
                                    staff.birth
                                ]),
                                m("div", [
                                    "Telp.: ",
                                    staff.phone
                                ]),
                                m("div", [
                                    "Email: ",
                                    staff.mail
                                ]),
                                m("div", [
                                    "Tgl. Masuk: ",
                                    staff.workEntry
                                ]),
                                m("div", [
                                    "Lama Kerja: ",
                                    staff.workPeriod
                                ]),
                                m("div", [
                                    "Pendidikan: ",
                                    staff.education
                                ])
                            ]) : null
                        }),
                        m("div", {
                            style: {textAlign: "center"}
                        }, m(Icon, {
                            element: "a",
                            svg: {content: m.trust(SVGAngleDown)},
                            style: {
                                opacity: ".5",
                                cursor: "pointer",
                                borderRadius: "50%",
                                transform: peek ? "rotateX(180deg)" : "rotateX(0)",
                                webkitTransition: "all .25s linear",
                                mozTransition: "all .25s linear",
                                oTransition: "all .25s linear",
                                transition: "all .25s linear"
                            },
                            events: {
                                onclick: function() {
                                    state.peek(!state.peek())
                                }
                            }
                        }))
                    ]
                }
            }]
        })
    }
}