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

export const questionnaire = {
    oninit: function(vnode) {
        window.scrollTo(0, 0)
        if (
            _.isEmpty(QuestionnaireSection.current)
            || _.isNil(QuestionnaireSection.current)
            || _.isEmpty(Questionnaire.current)
            || _.isNil(Qustionnaire.current)
        ) {
            Questionnaire.fetch(vnode.attrs.id)
            QuestionnaireSection.fetch(vnode.attrs.id)
        }
    },
    view: function() {
        return [
            m(".header-img", {
                style: {
                    backgroundImage: "url('img/head1.jpg')"
                }
            }),
            m(".header-content", {
                style: {top: 0}
            }, m("article", {
                style: {backgroundColor: "#fff"}
            }, QuestionnaireSection.loading || Questionnaire.loading ? null : [
                m("h2.article-title", [
                    m("i.fa.fa-book[aria-hidden=true]", {
                        style: {color: "rgb(255, 153, 0)", cursor: "pointer"},
                        onclick: function() {
                            m.route.set('/questionnaires/')
                        }
                    }),
                    m("div", {
                        style: {marginTop: ".3em"}
                    }, Questionnaire.current.data.attributes.title)
                ]),
                m(".flex", {
                    style: {flexFlow: "row wrap"}
                }, QuestionnaireSection.current.data.map(function(o) {
                    return m(Card, {
                        style: {width: "100%"},
                        content: [
                            {
                                primary: {
                                    title: m("a", {
                                        style: {cursor: "pointer"},
                                        onclick: function() {
                                            m.route.set("/sections/" + o.id)
                                        }
                                    }, o.title),
                                    // subtitle: o.description.length > 56 ? o.description.substr(0, 50) + " ..." : o.description
                                }
                            }
                        ]
                    })
                }))
            ]))
        ]
    }
}