import m from "mithril"
import { RaisedButton, Card, Button } from "polythene-mithril"
import { nav } from "./nav"
import * as QuestionType from "./questionType"
import { editButton } from "./buttons"
let qsList = require("../../json/section/id/questions/example")
let qsId = require("../../json/question/id/example70203")

var executeFunctionByName = function(functionName, context) {
    var namespaces = functionName.split(".");
    var func = namespaces.pop();
    for(var i = 0; i < namespaces.length; i++) {
        context = context[namespaces[i]];
    }
    return context[func];
}

var 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",
                zIndex: "21"
            }
        }, [
            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(qsList.data, function(o) { return o.id == parseInt(sId.data.id) - 1 })
                        if (prev != undefined) {
                            /* Request pake url yang tersedia */
                            // qModel.fetch(prev.url)
                            m.route.set("/sections/" + 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(qsList.data, function(o) { return o.id == parseInt(sId.data.id) + 1 })
                        if (next != undefined) {
                            /* Request pake url yang tersedia */
                            // sModel.fetch(next.url)
                            m.route.set("/sections/" + next.id)
                        }
                    }
                }
            }),
            m(".flex-single")
        ])
    }
}

var qsCard = {
    view: function() {
        return m(".flex", m(Card, {
            style: {
                flexGrow: "1",
                marginBottom: "14vh",
                // marginTop: "11vh"
            },
            content: [
                {
                    primary: {
                        title: [
                            m(editButton, { redirectURL: "/questions/" + qsId.data.id + "/edit" }),
                            m("#title", qsId.data.text)
                        ],
                        subtitle: qsId.data.description
                    }
                },
                {
                    text: {
                        content: [
                            m("div", {
                                style: {
                                    marginBottom: "1em"
                                }
                            }, [
                                m("div.info", {
                                    style: {
                                        color: "#999"
                                    }
                                }, "Nomor: " + qsId.data.number),
                                m("div.info", {
                                    style: {
                                        color: "#999"
                                    }
                                }, "Tipe: " + qsId.data.questionType),
                                m("div.info", {
                                    style: {
                                        color: "#999"
                                    }
                                }, "Dibuat: " + qsId.data.createdAt),
                                m("div.info", {
                                    style: {
                                        color: "#999"
                                    }
                                }, "Pembuat: " + qsId.data.creator.name),
                                m("div.info", {
                                    style: {
                                        color: "#999"
                                    }
                                }, "Diubah: " + qsId.data.updatedAt)
                            ]),
                            m("p", {
                                style: {
                                    fontSize: "large"
                                }
                            }, "Tampilan"),
                            m(".flex", {
                                style: {
                                    flexFlow: "row wrap"
                                }
                            }, m(Card, {
                                    style: {
                                        flexGrow: "1",
                                        flexBasis: "100%"
                                    },
                                    content: [
                                        {
                                            text: {
                                                content: [
                                                    m(executeFunctionByName(qsId.data.questionType, QuestionType), {
                                                        data: qsId.data
                                                    })
                                                ]
                                            }
                                        }
                                    ]
                                })
                            )
                        ]
                    }
                }
            ]
        }))
    }
}

export const question = {
    view: function() {
        return [
            m(nav, {
                title: "Pertanyaan #" + qsId.data.id,
                back: "/sections/" + qsId.data.sectionsUrl
            }),
            m(qsCard),
            m(pagination)
        ]
    }
}