import m from "mithril"
import _ from "lodash"
import { Card, Button, RaisedButton, Shadow, Menu, List, ListTile } from "polythene-mithril"
import { nav } from "./nav"
import { editButton, seeButton } from "./buttons"
import Questionnaire from "../models/Questionnaire"

const plusButton = {
    view: function() {
        return m(".flex#questionnaire-new", m(Button, {
            className: "flex",
            label: [
                m("i.fa.fa-plus.fa-fw"),
                m.trust(" "),
                "Tambah"
            ],
            style: {
                padding: ".8em",
                fontSize: "14px",
                lineHeight: "14px",
                fontWeight: "500",
                textTransform: "uppercase",
                whiteSpace: "pre",
                transition: ".2s all ease",
                maxWidth: "95%",
                margin: "0 auto"
            },
            events: {
                onmouseover: function() {
                    this.childNodes[0].style.backgroundColor = "rgba(255, 255, 255, .8)"
                },
                onmouseout: function() {
                    this.childNodes[0].style.backgroundColor = "#fff"
                },
                onclick: function() {
                }
            }
        }))
    }
}

const filterMenu = {
    oninit: function(vnode) {
        var show = false
        var sections = Questionnaire.current.sections.map(function(o) {
            return {
                title: o.status.charAt(0).toUpperCase() + o.status.slice(1),
                value: o.status
            }
        })
        var menus = []
        menus.push({title: "All", value: "all"})
        menus = menus.concat(sections.filter(function(value, index, self) {
            return self.findIndex(function(v) {
                return v.title === value.title && v.value === value.value
            }) === index
        }))
        vnode.state = {
            show,
            menus
        }
    },
    view: function(vnode) {
        var state = vnode.state
        var show = state.show
        var menus = state.menus
        return [
            m(Shadow),
            m(Menu, {
                target: "#filter",
                origin: "top-left",
                show,
                didHide: function() {state.show = false},
                offset: 8,
                size: 3,
                hideDelay: .2,
                content: m(List, {
                    tiles: menus.map(function(current) {
                        return {
                            title: current.title,
                            ink: true,
                            hoverable: true,
                            value: current.value
                        }
                    }),
                    keyboardControl: true,
                    onSelect: function({attrs}) {
                        if (attrs.value == "all") return Questionnaire.current.search = []
                        return Questionnaire.current.search = _.filter(Questionnaire.current.sections, function(o) {
                            return o.status == attrs.value
                        })
                    }
                })
            }),
            m(RaisedButton, {
                id: "filter",
                label: [
                    m("i.fa.fa-filter.fa-fw[aria-hidden=true]"),
                    m.trust(" "),
                    "Saring"
                ],
                style: {
                    backgroundColor: "#fff",
                    padding: ".8em",
                    fontSize: "14px",
                    lineHeight: "14px",
                    fontWeight: "500",
                    textTransform: "uppercase",
                    whiteSpace: "pre",
                },
                events: {
                    onclick: function() { state.show = true }
                }
            })
        ]
    }
}

const qCard = {
    view: function() {
        var sections =
        _.isNil(Questionnaire.current.search)
        || _.isNull(Questionnaire.current.search)
        || _.isEmpty(Questionnaire.current.search) ?
        Questionnaire.current.sections
        : Questionnaire.current.search
        return m(Card, {
            style: {
                flexGrow: "1",
                marginBottom: "14vh",
                // marginTop: "11vh"
            },
            content: [
                {
                    primary: {
                        title: [
                            m(editButton, { redirectURL: "/user/questionnaires/" + Questionnaire.current.id + "/edit"}),
                            m("#title", Questionnaire.current.title)
                        ],
                        subtitle: Questionnaire.current.description
                    }
                },
                {
                    text: {
                        content: [
                            m("div", {
                                style: {
                                    marginBottom: "1em"
                                }
                            }, [
                                m("div.info", {
                                    style: {
                                        color: "#999"
                                    }
                                }, "Dibuat: " + Questionnaire.current.createdAt),
                                m("div.info", {
                                    style: {
                                        color: "#999"
                                    }
                                }, "Pembuat: " + Questionnaire.current.creator.name),
                                m("div.info", {
                                    style: {
                                        color: "#999"
                                    }
                                }, "Dirilis: " + Questionnaire.current.releasedAt),
                                // m("div.info", {
                                //     style: {
                                //         color: "#999"
                                //     }
                                // }, "Diperiksa: " + Questionnaire.current.reviewedAt),
                                // m("div.info", {
                                //     style: {
                                //         color: "#999"
                                //     }
                                // }, "Pemeriksa: " + Questionnaire.current.reviewer.name),
                                m("div.info", {
                                    style: {
                                        color: "#999"
                                    }
                                }, "Diubah: " + Questionnaire.current.updatedAt)
                            ]),
                            m("p", {
                                style: {
                                    fontSize: "large"
                                }
                            }, "Seksi"),
                            // m(filterMenu),
                            m("div", {
                                style: {margin: "0 1em"}
                            }, m("i.fa.fa-filter.fa-fw[aria-hidden=true]"), " Saring: ", [
                                {title: "Semua", icon: "circle-o", value: "all"},
                                {title: "Dirilis", icon:"upload", value: "released"},
                                {title: "Draft", icon:"file-text-o", value: "draft"},
                                {title: "Ditutup", icon:"times", value: "closed"}
                            ].map(function(o) {
                                return m("a", {
                                    style: {
                                        color: "rgb(0, 0, 255)",
                                        cursor: "pointer",
                                        margin: "0 1em"
                                    },
                                    onclick: function() {
                                        Questionnaire.current.search =
                                        _.filter(
                                            Questionnaire.current.sections,
                                            function(i) {return i.status == o.value}
                                        )
                                        console.log(Questionnaire.current.search);
                                    }
                                }, m("i.fa.fa-fw.fa-" + o.icon + "[aria-hidden=true]"), m.trust(" "), o.title)
                            })),
                            m(".flex", {
                                style: {
                                    flexFlow: "row wrap"
                                }
                            }, sections.map(function(s) {
                                return m(Card, {
                                    style: {
                                        flexGrow: "1",
                                        flexBasis: "100%"
                                    },
                                    content: [
                                        {
                                            primary: {
                                                title: m("a", {
                                                    style: {
                                                        cursor: "pointer"
                                                    },
                                                    onclick: function() {
                                                        m.route.set("/user/sections/" + s.id)
                                                    }
                                                }, s.title + "["  + s.status + "]"),
                                                subtitle: s.description
                                            }
                                        }
                                    ]
                                })
                            })),
                            m(plusButton)
                        ]
                    }
                }
            ]
        })
    }
}

const pagination = {
    oncreate: function() {
        for (var i = 0; i < document.getElementsByClassName("flex-single").length; i++) {
            document.getElementsByClassName("flex-single")[i].style.flexGrow = 1
        }
    },
    view: function() {
        return m(".flex", {
            style: {
                backgroundColor: "#fff",
                position: "fixed",
                bottom: "0",
                width: "100%",
                padding: "1em"
            }
        }, [
            m(".flex-single"),
            m(RaisedButton, {
                className: "flex-single",
                label: m("i.fa.fa-arrow-left.fa-fw", {
                    style: {
                        margin: "1em 0",
                    }
                }),
                events: {
                    onclick: function() {
                        // var prev = _.find(qModel.list, function(o) { return o.id == parseInt(qModel.current.id) - 1 })
                        var prev = _.find(qJSON.data, function(o) { return o.id == parseInt(Questionnaire.current.id) - 1 })
                        if (prev != undefined) {
                            /* Request pake url yang tersedia */
                            // qModel.fetch(prev.url)
                            m.route.set("/questionnaires/" + prev.id)
                        }
                    }
                }
            }),
            m(".flex-single"),
            m(RaisedButton, {
                className: "flex-single",
                label: m("i.fa.fa-arrow-right.fa-fw", {
                    style: {
                        margin: "1em 0",
                    }
                }),
                events: {
                    onclick: function() {
                        // var next = _.find(qModel.list, function(o) { return o.id == parseInt(qModel.current.id) + 1 })
                        var next = _.find(qJSON.data, function(o) { return o.id == parseInt(Questionnaire.current.id) + 1 })
                        if (next != undefined) {
                            /* Request pake url yang tersedia */
                            // qModel.fetch(next.url)
                            m.route.set("/questionnaires/" + next.id)
                        }
                    }
                }
            }),
            m(".flex-single")
        ])
    }
}

export const questionnaire = {
    oninit: function() {
        Questionnaire.fetchCurrent()
    },
    view: function() {
        return [
            m(nav, {
                title: "Kuesioner #" + Questionnaire.current.id,
                back: "/user/questionnaires"
            }),
            m(".flex", m(qCard)),
            m(pagination)
        ]
    }
}