import m from "mithril"
import moment from "moment"
import powerform from "powerform"
import { Card, RaisedButton, TextField } from "polythene-mithril"
import DatePicker from "../custom/mithril-datepicker"
import {} from "../../css/custom/mithril-datepicker.css"
import { nav } from "./nav"
import Questionnaire from "../models/Questionnaire"

var qCard = {
    form: powerform({
        title: function(v) {
            if (!v || v == "" || _.isEmpty(v) || _.isNil(v)) {
                return "Kolom ini harus diisi"
            }
        },
        release: function(v) {
            if (!v || v == "" || _.isEmpty(v) || _.isNil(v)) {
                return "Kolom ini harus diisi"
            }
        }
    }),
    oninit: function() {
        qCard.form.title(Questionnaire.current.title)
    },
    oncreate: function() {
        Questionnaire.current.releasedAt = moment().format("YYYY-MM-DD HH:mm:ss")
        qCard.form.release(Questionnaire.current.releasedAt)
    },
    view: function() {
        return m("form", {
            style: {flexGrow: "1", display: "flex"},
            onsubmit: function(e) {
                e.preventDefault()
                if (qCard.form.isValid()) {
                    m.route.set("/user/questionnaires/" + Questionnaire.current.id)
                }
            }
        }, m(Card, {
            style: {
                flexGrow: "1"
            },
            content: [
                {
                    text: {
                        content: [
                            m(TextField, {
                                label: "Judul",
                                floatingLabel: true,
                                tight: true,
                                value: Questionnaire.current.title,
                                events: {
                                    oninput: m.withAttr("value", function(v) {
                                        Questionnaire.current.title = v
                                        qCard.form.title(v)
                                    })
                                },
                                validate: function() {
                                    return {
                                        valid: qCard.form.title.isValid(),
                                        error: qCard.form.title.error()
                                    }
                                }
                            }),
                            m(TextField, {
                                label: "Deskripsi",
                                required: true,
                                floatingLabel: true,
                                tight: true,
                                value: Questionnaire.current.description,
                                events: {
                                    oninput: m.withAttr("value", function(v) {
                                        Questionnaire.current.description = v
                                    })
                                }
                            }),
                            m("div", {
                                style: {
                                    color: "rgba(0, 0, 0, .4)",
                                    fontSize: "small",
                                    fontWeight: "400",
                                    lineHeight: "24px",
                                    marginBottom: ".5em"
                                }
                            }, "Tanggal Rilis *"),
                            m(DatePicker, {
                                date: moment(Questionnaire.current.releasedAt),
                                locale: "id-id",
                                onchange: function(v) {
                                    Questionnaire.current.releasedAt =
                                    moment(v).format("YYYY-MM-DD HH:mm:ss")
                                    qCard.form.release(Questionnaire.current.releasedAt)
                                }
                            })
                        ]
                    }
                },
                {
                    actions: {
                        bordered: true,
                        content: [
                            m(RaisedButton, {
                                element: "button",
                                label: [
                                    m("i.fa.fa-floppy-o.fa-fw"),
                                    m.trust(" "),
                                    "Simpan"
                                ],
                                style: {
                                    padding: ".6em .8em",
                                    fontSize: "14px",
                                    lineHeight: "14px",
                                    fontWeight: "500",
                                    textTransform: "uppercase",
                                    whiteSpace: "pre",
                                    backgroundColor: "rgb(255, 153, 0)"
                                },
                                tone: "dark"
                            }),
                            m(".flex"),
                            m(RaisedButton, {
                                label: [
                                    m("i.fa.fa-times.fa-fw"),
                                    m.trust(" "),
                                    "Hapus"
                                ],
                                style: {
                                    padding: ".6em .8em",
                                    fontSize: "14px",
                                    lineHeight: "14px",
                                    fontWeight: "500",
                                    textTransform: "uppercase",
                                    whiteSpace: "pre",
                                    backgroundColor: "rgb(255, 0, 0)"
                                },
                                tone: "dark"
                            })
                        ]
                    }
                }
            ]
        }))
    }
}

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