import m from "mithril"
import { Card, Shadow } from "polythene-mithril"
import Questionnaire from "../../models/Questionnaire"

export const questionnaireList = {
    oninit: function() {
        Questionnaire.loadList()
    },
    view: function() {
        return [
            m(".header-img", {
                style: {
                    backgroundImage: "url('img/head1.jpg')"
                }
            }),
            m(".header-title#header-top", {
                style: {
                    display: "table",
                    color: "#fff",
                    position: "fixed"
                }
            }, m("div", {
                style: {
                    display: "table-cell",
                    verticalAlign: "middle",
                    textAlign: "center"
                }
            }, [
                m("h1", {
                    style: {
                        fontWeight: "bold"
                    }
                }, m("span", "Questionnaire List")),
                m("p", "Daftar kuesioner yang dapat Anda isi"),
                m("div", {
                    style: {padding: "3em 0"}
                }),
                m("span.fa-stack.fa-2x", {
                    id: "down",
                    style: {cursor: "pointer"},
                    onclick: function() {
                        var scrollValue = 1
                        var scrolling = setInterval(function() {
                            window.scrollTo(0, window.scrollY + scrollValue)
                            if (
                                window.pageYOffset
                                >= document.querySelector(".header-title").offsetHeight
                                || window.pageYOffset
                                >= document.querySelector("article").offsetHeight
                            ) {
                                window.clearInterval(scrolling)
                            }
                            scrollValue++
                        }, 10)
                    },
                    onmouseover: function() {
                        this.childNodes[0]
                        .style.color = "#fff"
                        this.childNodes[1]
                        .style.transform = "translateY(0.15em)"
                        this.childNodes[1]
                        .style.color = "#000"
                    },
                    onmouseout: function() {
                        this.childNodes[0]
                        .style.color = "rgba(0, 0, 0, .4)"
                        this.childNodes[1]
                        .style.transform = "translateY(0)"
                        this.childNodes[1]
                        .style.color = "#fff"
                    },
                    oncreate: function() {
                        document.getElementById("down")
                        .childNodes[0].style.color = "rgba(0, 0, 0, .4)"
                        document.getElementById("down")
                        .childNodes[1].style.color = "#fff"
                    }
                }, [
                    m("i.fa.fa-circle.fa-stack-2x", {
                        style: {
                            transition: "all .3s ease .05s",
                            webkitTransition: "all .3s ease .05s",
                            mozTransition: "all .3s ease .05s",
                            oTransition: "all .3s ease .05s"
                        },
                    }),
                    m("i.fa.fa-angle-double-down.fa-stack-1x", {
                        style: {
                            transition: "all .3s ease .05s",
                            webkitTransition: "all .3s ease .05s",
                            mozTransition: "all .3s ease .05s",
                            oTransition: "all .3s ease .05s"
                        }
                    })
                ])
            ])),
            m(".header-content", m("article", {
                style: {backgroundColor: "#fff"}
            }, [
                m("h2.article-title", [
                    m("i.fa.fa-graduation-cap[aria-hidden=true]", {
                        style: {color: "rgb(255, 153, 0)"}
                    }),
                    m("div", {
                        style: {marginTop: ".3em"}
                    }, "Mahasiswa STIE BISMA LEPISI")
                ]),
                m(".flex", {
                    style: {flexFlow: "row wrap"}
                }, Questionnaire.loading ? null : Questionnaire.list.map(function(o) {
                        return m(Card, {
                            style: {width: "100%"},
                            before: m(Shadow),
                            content: [
                                {
                                    primary: {
                                        title: m("a", {
                                            style: {cursor: "pointer"},
                                            onclick: function() {
                                                m.route.set("/questionnaires/" + o.id)
                                            }
                                        }, o.title),
                                        // subtitle: o.description.length > 56 ?
                                        // o.description.substr(0, 50) + " ..."
                                        // : o.description
                                        subtitle: o.description
                                    }
                                }
                            ]
                        })
                    // }
                }))
            ]))
        ]
    }
}