import m from "mithril"
import { RaisedButton, Card, Button } from "polythene-mithril"
import { nav } from "./nav"
import { editButton, seeButton } from "./buttons"
import Section from "../models/Section"
let sId = require("../../json/section/id/example")
let sList = require("../../json/questionnaire/id/sections/example")

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"
            }
        }, [
            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(sModel.list, function(o) { return o.id == parseInt(sModel.current.id) - 1 })
                        var prev = _.find(Section.list, function(o) { return o.id == parseInt(Section.current.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(sModel.list, function(o) { return o.id == parseInt(sModel.current.id) + 1 })
                        var next = _.find(Section.list, function(o) { return o.id == parseInt(Section.current.id) + 1 })
                        if (next != undefined) {
                            /* Request pake url yang tersedia */
                            // sModel.fetch(next.url)
                            m.route.set("/sections/" + next.id)
                        }
                    }
                }
            }),
            m(".flex-single")
        ])
    }
}

var sCard = {
    view: function() {
        return m(".flex", m(Card, {
            style: {
                flexGrow: "1",
                marginBottom: "14vh",
                // marginTop: "11vh"
            },
            content: [
                {
                    primary: {
                        title: [
                            m(editButton, { redirectURL: "/user/sections/" + Section.current.id + "/edit" }),
                            m("#title", Section.current.title)
                        ],
                        subtitle: Section.current.description
                    }
                },
                {
                    text: {
                        content: [
                            m("div", {
                                style: {
                                    marginBottom: "1em"
                                }
                            }, [
                                m("div.info", {
                                    style: {
                                        color: "#999"
                                    }
                                }, "Dibuat: " + Section.current.createdAt),
                                m("div.info", {
                                    style: {
                                        color: "#999"
                                    }
                                }, "Pembuat: " + Section.current.creator.name),
                                m("div.info", {
                                    style: {
                                        color: "#999"
                                    }
                                }, "Diubah: " + Section.current.updatedAt)
                            ]),
                            m("p", {
                                style: {
                                    fontSize: "large"
                                }
                            }, "Pertanyaan"),
                            m(".flex", {
                                style: {
                                    flexFlow: "row wrap"
                                }
                            }, _.sortBy(Section.current.questions, [function(o) {
                                return o.number
                            }]).map(function(sq) {
                                return m("#drag-wrapper-" + sq.id, {
                                    style: {
                                        flexGrow: "1",
                                        flexBasis: "100%",
                                        minHeight: "94px",
                                        margin: ".5em 0"
                                    }
                                }, m(Card, {
                                    style: {width: "100%", margin: "0", padding: "0"},
                                    id: sq.id,
                                    className: "draggable",
                                    content: [
                                        {
                                            primary: {
                                                title: m("a", {
                                                    style: {
                                                        cursor: "pointer"
                                                    },
                                                    onclick: function() {
                                                        m.route.set("/user/questions/" + sq.id)
                                                    }
                                                }, sq.text),
                                                subtitle: sq.description
                                            }
                                        }
                                    ]
                                }))
                            }))
                        ]
                    }
                }
            ]
        }))
    }
}

export const section = {
    oninit: function() {
        if (_.isNil(Section.current) || _.isEmpty(Section.current)) Section.fetchCurrent()
    },
    view: function() {
        return [
            m(nav, {
                title: "Seksi #" + Section.current.id,
                back: "/user/questionnaires/" + Section.current.questionnaire.id
            }),
            m(sCard),
            m(pagination)
        ]
    }
}