import m from "mithril"
import _ from "lodash"
import { TextField, RadioGroup, Checkbox } from "polythene-mithril"

export const text = {
    view: function(vnode) {
        var data = vnode.attrs.data
        return m(TextField, {
            id: data.elId || "",
            label: data.text,
            required: true,
            floatingLabel: data.floatingLabel || true,
            tight: true,
            help: data.description || null
        })
    }
}

export const numeric = {
    view: function(vnode) {
        var data = vnode.attrs.data
        return m(TextField, {
            label: data.text,
            required: true,
            floatingLabel: _.isNil(data.floatingLabel) ? true : data.floatingLabel,
            tight: true,
            help: data.description || null,
            validate: function(value) {
                if (isNaN(value)) {
                    return {
                        valid: false,
                        error: "Gunakan angka"
                    }
                } else {
                    return { valid: true }
                }
            },
            validateOnInput: true
        })
    }
}

export const bool = {
    view: function(vnode) {
        var data = vnode.attrs.data
        return [
            m("div", {
                style: {
                    color: "rgba(0, 0, 0, .4)",
                    fontSize: "16px",
                    fontWeight: "400",
                    lineHeight: "24px",
                    marginTop: ".5em"
                }
            }, data.text + " *"),
            m("i", {
                style: {
                    color: "rgba(0, 0, 0, .4)"
                }
            }, "(" + data.description + ")" || null),
            m(RadioGroup, {
                id: "bool",
                className: "flex",
                style: {
                    margin: ".5rem 0",
                    flexFlow: "row wrap"
                },
                buttons: [
                    {
                        id: "true",
                        label: "Benar",
                        value: true,
                        style: {
                            marginTop: ".5em",
                            marginBottom: ".5em",
                            marginRight: "0",
                            flexGrow: "1",
                            flexBasis: "100%"
                        }
                    },
                    {
                        id: "false",
                        label: "Salah",
                        value: false,
                        style: {
                            marginTop: ".5em",
                            marginBottom: ".5em",
                            marginRight: "0",
                            flexGrow: "1",
                            flexBasis: "100%"
                        }
                    }
                ]
            })
        ]
    }
}

export const multichoice = {
    view: function(vnode) {
        var data = vnode.attrs.data
        return [
            m("div", {
                style: {
                    color: "rgba(0, 0, 0, .4)",
                    fontSize: "16px",
                    fontWeight: "400",
                    lineHeight: "24px",
                    marginTop: ".5em"
                }
            }, data.text + " *"),
            m("i", {
                style: {
                    color: "rgba(0, 0, 0, .4)"
                }
            }, "(" + data.description + ")" || null),
            m(".flex", {
                style: {
                    flexFlow: "row wrap"
                }
            }, data.choices.map(function(c) {
                return m(Checkbox, {
                    id: "choice-" + c.id,
                    label: c.text,
                    value: c.id,
                    style: {
                        flexGrow: "1",
                        flexBasis: "100%",
                        marginTop: ".5em",
                        marginBottom: ".5em"
                    }
                })
            }))
        ]
    }
}

export const choice = {
    oncreate: function(vnode) {
        var data = vnode.attrs.data
        data.choices.map(function(c) {
            if (c.fillable) {
                var child = document.createElement("span")
                child.style.marginLeft = ".5em"
                child.style.marginTop = "1.4em"
                var input = { view: function() {
                    return m(text, {
                        data: {
                            elId: "fillable-" + c.id,
                            text: "",
                            floatingLabel: false
                        }
                    })
                }}
                /* Get parent */
                var parent = document.getElementById("choice-" + c.id).childNodes[0]
                parent.appendChild(child)
                m.mount(parent.querySelector("span"), input)
                document.getElementById("fillable-" + c.id).querySelector("input").disabled = true
            }
        })
    },
    view: function(vnode) {
        var data = vnode.attrs.data
        return [
            m("div", {
                style: {
                    color: "rgba(0, 0, 0, .4)",
                    fontSize: "16px",
                    fontWeight: "400",
                    lineHeight: "24px",
                    marginTop: ".5em"
                }
            }, data.text + " *"),
            m("i", {
                style: {
                    color: "rgba(0, 0, 0, .4)"
                }
            }, "(" + data.description + ")" || null),
            m(RadioGroup, {
                id: "choices",
                className: "flex",
                style: {
                    margin: ".5rem 0",
                    flexFlow: "row wrap"
                },
                buttons: data.choices.map(function(c) {
                    return {
                        id: "choice-" + c.id,
                        value: c.id,
                        label: c.text,
                        style: {
                            marginTop: ".5em",
                            marginBottom: ".5em",
                            marginRight: "0",
                            flexGrow: "1",
                            flexBasis: "100%"
                        }
                    }
                }),
                onChange: function(state) {
                    var chosen = _.find(data.choices, function(o) { return o.id == state.value })
                    var target = document.getElementById("fillable-" + chosen.id)
                    if (chosen.fillable) {
                        target.querySelector("input").disabled = false
                        target.querySelector("input").autofocus = true
                    } else {
                        data.choices.map(function(c) {
                            var target = document.getElementById("fillable-" + c.id)
                            if (!_.isNil(target)) {
                                target.querySelector("input").disabled = true
                                target.querySelector("input").value = ""
                            }
                        })
                    }
                }
            })
        ]
    }
}
