import m from "mithril"
import powerform from "powerform"
import moment from "moment"
import DatePicker from "../../custom/mithril-datepicker"
import {
    Card,
    Button,
    TextField,
    RadioGroup,
    List,
    ListTile
} from "polythene-mithril"
import Category from "../../models/Category"
import Respondent from "../../models/Respondent"

const registerForm = {
    form: powerform({
        name: function(v) {
            if (_.isEmpty(v)) {
                return "Tuliskan nama Anda"
            }
        },
        gender: function(v) {
            if (_.isEmpty(v)) return "Pilih salah satu"
        },
        birthdate: function(v) {

        },
        handphone: function(v) {
            if (_.isEmpty(v)) return "Tuliskan nomor telepon Anda"
        },
        occupation: function(v) {
            if (_.isEmpty(v)) return "Tuliskan pekerjaan Anda saat ini"
        },
        category: function(v) {
            if (_.isEmpty(v)) return "Pilih kategori Anda"
        }
    }),
    oninit: function(vnode) {
        registerForm.form.name("")
        registerForm.form.gender("")
        registerForm.form.birthdate(moment().format("YYYY-MM-DD HH:mm:ss"))
        registerForm.form.handphone("")
        registerForm.form.occupation("")
        registerForm.form.category("")

        Category.loadList()
        var showCategory = false
        vnode.state = {showCategory}
    },
    view: function(vnode) {
        var state = vnode.state
        var showCategory = state.showCategory
        return _.isEmpty(Category.list) ?
        [m(".signal"), m(".signal.late")] : [
            m(".header-img", {
                style: {
                    backgroundImage: "url('img/head1.jpg')"
                }
            }),
            m(".header-content", {
                style: {top: 0}
            }, m("article", {
                style: {backgroundColor: "#fff"}
            }, [
                m("h2.article-title", {
                    style: {marginBottom: ".5em"}
                }, m("div", {
                    style: {marginTop: ".3em"}
                }, "Registrasi")),
                m(".flex"),
                m(".header-title", {
                    style: {
                        display: "table"
                    }
                }, m("form", {
                        onsubmit: function(e) {
                            e.preventDefault()
                            m.route.set("/questionnaires")
                        },
                        style: {
                            padding: "1em",
                            display: "table",
                            height: "100%",
                            width: "100%"
                        }
                    }, m("div", {
                        style: {
                            display: "table-cell",
                            verticalAlign: "middle",
                        }
                    }, m(".flex", {
                        style: {
                            width: "100%",
                        }
                    }, m(".constant"), m(Card, {
                    className: "front-card",
                    style: {
                        height: "100%",
                        margin: "0"
                    },
                    content: [
                        {
                            primary: {
                                title: "Data Diri",
                                subtitle: "Silahkan isi data diri Anda terlebih dahulu"
                            }
                        },
                        {
                            text: {
                                className: "flex but",
                                content: [
                                    m("div", {
                                        style: {
                                            flexBasis: "45%"
                                        }
                                    }, [
                                        m(TextField, {
                                            className: "firstInput",
                                            label: "Nama Lengkap",
                                            floatingLabel: true,
                                            tight: true,
                                            autofocus: true,
                                            value: registerForm.form.name(),
                                            events: {
                                                oninput: function() {
                                                    registerForm.form.name()
                                                }
                                            },
                                            validate: function() {
                                                return {
                                                    valid: registerForm.form.name.isValid(),
                                                    error: registerForm.form.name.error()
                                                }
                                            }
                                        }),
                                        m("span", {
                                            style: {
                                                color: "rgba(0, 0, 0, .4)",
                                                fontSize: "16px",
                                                fontWeight: "400",
                                                lineHeight: "24px"
                                            }
                                        }, "Jenis Kelamin *"),
                                        m(RadioGroup, {
                                            id: "gender",
                                            name: "gender",
                                            style: {
                                                margin: ".5rem 0"
                                            },
                                            buttons: [
                                                {
                                                    id: "gender-m",
                                                    value: "m",
                                                    label: "Laki-laki",
                                                    events: {
                                                        oncreate: function() {
                                                            document.getElementById("gender-m")
                                                            .querySelector("input")
                                                            .required = "required"
                                                        }
                                                    }
                                                },
                                                {
                                                    id: "gender-f",
                                                    value: "f",
                                                    label: "Perempuan",
                                                    events: {
                                                        oncreate: function() {
                                                            document.getElementById("gender-f")
                                                            .querySelector("input")
                                                            .required = "required"
                                                        }
                                                    }
                                                }
                                            ],
                                            onChange: function(state) {
                                                registerForm.form.gender(state.value)
                                            }
                                        }),
                                        m("div", {
                                            style: {
                                                color: "rgba(0, 0, 0, .4)",
                                                fontSize: "16px",
                                                fontWeight: "400",
                                                lineHeight: "24px",
                                                marginBottom: ".5em"
                                            }
                                        }, "Tanggal Lahir *"),
                                        m(DatePicker, {
                                            date: registerForm.form.birthdate(),
                                            locale: "id-id",
                                            onchange: function(chosenDate) {
                                                registerForm.form.birthdate(moment(chosenDate).format("YYYY-MM-DD HH:mm:ss"))
                                            },
                                            oncreate: function() {
                                                var target = document.querySelector(".mithril-date-picker")
                                                var click = target.childNodes[0].onclick
                                                var className = target.childNodes[0].className
                                                return m.mount(target, {
                                                    view: function() {
                                                        return m("input", {
                                                            className: className,
                                                            value: moment(registerForm.form.birthdate()).format("ddd, DD MMM YYYY"),
                                                            onclick: click,
                                                            required: "required",
                                                            readonly: "readonly",
                                                        })
                                                    }
                                                })
                                            }
                                        })
                                    ]),
                                    m("div", {
                                        style: {
                                            flexGrow: "1"
                                        }
                                    }),
                                    m("div", {
                                        style: {
                                            flexBasis: "45%"
                                        }
                                    }, [
                                        m(TextField, {
                                            label: "No. Handphone",
                                            floatingLabel: true,
                                            tight: true,
                                            validateOnInput: true,
                                            events: {
                                                oninput: function() {
                                                    registerForm.form.handphone(this.value)
                                                }
                                            },
                                            value: registerForm.form.handphone(),
                                            validate: function() {
                                                return {
                                                    valid: registerForm.form.handphone.isValid(),
                                                    error: registerForm.form.handphone.error()
                                                }
                                            }
                                        }),
                                        m(TextField, {
                                            className: "lastInput",
                                            label: "Pekerjaan",
                                            floatingLabel: true,
                                            tight: true,
                                            events: {
                                                oninput: function() {
                                                    registerForm.form.occupation(this.value)
                                                }
                                            },
                                            value: registerForm.form.occupation(),
                                            validate: function() {
                                                return {
                                                    valid: registerForm.form.occupation.isValid(),
                                                    error: registerForm.form.occupation.error()
                                                }
                                            }
                                        }),
                                        m(TextField, {
                                            id: "category",
                                            label: "Kategori",
                                            events: {
                                                onfocus: function() {
                                                    state.showCategory = true
                                                }
                                            },
                                            validate: function() {
                                                return {
                                                    valid: registerForm.form.category.isValid(),
                                                    error: registerForm.form.category.error()
                                                }
                                            },
                                            validateOnInput: true,
                                            value: registerForm.form.category().name
                                        }),
                                        m(List, {
                                            tiles: Category.list.data.map(function(o) {
                                                return m(ListTile, {
                                                    title: o.name,
                                                    value: o.id,
                                                    hoverable: true,
                                                    events: {
                                                        onclick: function() {
                                                            registerForm.form.category(o)
                                                            state.showCategory = false
                                                        }
                                                    }
                                                })
                                            }),
                                            compact: true,
                                            borders: true,
                                            style: {
                                                backgroundColor: "rgba(0, 0, 0, .04)",
                                                display: showCategory ? "block" : "none"
                                            }
                                        })
                                    ])
                                ]
                            }
                        },
                        {
                            actions: {
                                content: [
                                    m(".flex", [
                                        m(Button, {
                                            element: "button",
                                            label: [
                                                m("i.fa.fa-chevron-left.fa-fw[aria-hidden=true]"),
                                                m.trust(" "),
                                                "kembali"
                                            ],
                                            style: {
                                                backgroundColor: "rgb(255, 153, 0)",
                                                padding: ".8em",
                                                fontSize: "14px",
                                                lineHeight: "14px",
                                                fontWeight: "500",
                                                textTransform: "uppercase",
                                                whiteSpace: "pre"
                                            },
                                            tone: "dark"
                                        }),
                                        m(".flex"),
                                        m(Button, {
                                            element: "button",
                                            label: [
                                                "kirim",
                                                m.trust(" "),
                                                m("i.fa.fa-upload.fa-fw[aria-hidden=true]")
                                            ],
                                            type: "submit",
                                            style: {
                                                backgroundColor: "rgb(255, 153, 0)",
                                                padding: ".8em",
                                                fontSize: "14px",
                                                lineHeight: "14px",
                                                fontWeight: "500",
                                                textTransform: "uppercase",
                                                whiteSpace: "pre"
                                            },
                                            tone: "dark"
                                        })
                                    ])
                                ]
                            }
                        }
                    ]
                }), m(".constant"))))),
                m(".flex")
            ]))
        ]
    }
}

export default registerForm