import m from "mithril"
import moment from "moment"
import DatePicker from "../custom/mithril-datepicker"
import {} from "../../css/custom/mithril-datepicker.css"
import { Card, TextField, RadioButton, RadioGroup, RaisedButton, List, ListTile, Menu, Dialog } from "polythene-mithril"
// import { User } from "../models/User"

const head = {
    view: function() {
        return [
            m(".header-nav", {
                style: {
                    color: "#fff",
                    cursor: "pointer"
                },
                onclick: function() {
                    m.route.set("")
                }
            }, m("i.fa.fa-home.fa-lg")),
            m(".header-img", {
                style: {
                    backgroundImage: "url('img/head1.jpg')"
                }
            })
        ]
    }
}

export const login = {
    isValid: {},
    view: function() {
        return [
            m(head),
            m(".header-title", {
                style: {
                    display: "table"
                }
            }, m("div", {
                style: {
                    display: "table-cell",
                    verticalAlign: "middle"
                }
            }, m(".flex", [
                m(".constant"),
                m(Card, {
                    className: "front-card",
                    style: {
                        width: "initial"
                    },
                    content: [
                        {
                            primary: {
                                title: "Masuk",
                                subtitle: "Masuk dengan kode konfirmasi yang telah diterima"
                            }
                        },
                        {
                            text: {
                                content: [
                                    m(TextField, {
                                        label: "Kode",
                                        required: true,
                                        floatingLabel: true,
                                        tight: true,
                                        validate: function(value) {
                                            if (/^[A-Z0-9]+$/.test(value) == false || value.length != 6) {
                                                login.isValid.code = false
                                                return {
                                                    valid: false,
                                                    error: "Kode tidak valid"
                                                }
                                            } else {
                                                login.isValid.code = true
                                            }
                                        },
                                        validateOnInput: true
                                    })
                                ]
                            }
                        },
                        {
                            actions: {
                                content: m(RaisedButton, {
                                    label: "Masuk",
                                    events: {
                                        onclick: function() {
                                            login.isValid.code == true ?
                                            m.route.set("")
                                            : null
                                        }
                                    }
                                })
                            }
                        }
                    ]
                }),
                m(".constant")
            ])))
        ]
    }
}

export const register = {
    showMenu: false,
    oninit: function() {
        // if (_.isEmpty(User.current)) return m.route.set("/")
    },
    view: function() {
        return [
            m(head),
            m(".header-title", {
                style: {
                    display: "table"
                }
            }, m("form", {
                    onsubmit: function(e) {
                        e.preventDefault()
                        // console.log(User.current);
                        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: "Daftar",
                            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",
                                        required: true,
                                        floatingLabel: true,
                                        tight: true,
                                        autofocus: true,
                                        value: User.current.name,
                                        events: {
                                            oninput: function() {
                                                User.current.name = this.value
                                            }
                                        }
                                    }),
                                    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) {
                                            User.current.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: User.current.birthDate,
                                        locale: "id-id",
                                        onchange: function(chosenDate) {
                                            User.current.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, {
                                                oncreate: function() {
                                                    User.current.birthDate = moment().format("YYYY-MM-DD HH:mm:ss")
                                                },
                                                view: function() {
                                                    return m("input", {
                                                        className: className,
                                                        value: moment(User.current.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",
                                        required: true,
                                        floatingLabel: true,
                                        tight: true,
                                        pattern: "[0-9]+",
                                        validateOnInput: true,
                                        error: "Gunakan angka",
                                        events: {
                                            oninput: function() {
                                                User.current.handphone = this.value
                                            }
                                        },
                                        value: User.current.handphone
                                    }),
                                    m(TextField, {
                                        className: "lastInput",
                                        label: "Pekerjaan",
                                        required: true,
                                        floatingLabel: true,
                                        tight: true,
                                        events: {
                                            oninput: function() {
                                                User.current.occupation = this.value
                                            }
                                        },
                                        value: User.current.occupation
                                    }),
                                    m(TextField, {
                                        id: "category",
                                        label: "Kategori",
                                        required: true,
                                        events: {
                                            onfocus: function() {
                                                var holder = document
                                                    .querySelector("span.pe-dialog__placeholder")
                                                Dialog.show({
                                                    title: "Pilih kategori",
                                                    body: m(List, {
                                                        tiles: [
                                                            {
                                                                title: "Mahasiswa STIE BISMA LEPISI",
                                                                value: 43,
                                                                hoverable: true
                                                            },
                                                            {
                                                                title: "Mahasiswa AKSEMA LEPISI",
                                                                value: 44,
                                                                hoverable: true
                                                            },
                                                            {
                                                                title: "Dosen STIE BISMA LEPISI",
                                                                value: 45,
                                                                hoverable: true
                                                            },
                                                            {
                                                                title: "Dosen AKSEMA LEPISI",
                                                                value: 46,
                                                                hoverable: true
                                                            }
                                                        ],
                                                        keyboardControl: true,
                                                        highlightIndex: 0,
                                                        onSelect: function({attrs}) {
                                                            Dialog.hide()
                                                            User.current.category = attrs.value
                                                            document.getElementById("category")
                                                            .querySelector("input")
                                                            .value = attrs.title
                                                            document.getElementById("category")
                                                            .className += "pe-textfield--dirty"
                                                        }
                                                    }),
                                                    backdrop: true
                                                })
                                            }
                                        }
                                    })
                                ])
                            ]
                        }
                    },
                    {
                        actions: {
                            content: m(RaisedButton, {
                                element: "button",
                                label: "Kirim",
                                type: "submit"
                            })
                        }
                    }
                ]
            }), m(".constant"))))),
            m(Dialog)
        ]
    }
}

export const loginUser = {
    view: function() {
        return [
            m(head),
            m(".header-title", {
                style: {
                    display: "table"
                }
            }, m("div", {
                style: {
                    display: "table-cell",
                    verticalAlign: "middle"
                }
            }, m(".flex", [
                m(".constant"),
                m("form", {
                    onsubmit: function(e) {
                        e.preventDefault()
                        User.login()
                    }
                }, m(Card, {
                    className: "front-card",
                    style: {
                        width: "initial"
                    },
                    content: [
                        {
                            primary: {
                                title: "Masuk"
                            }
                        },
                        {
                            text: {
                                className: "login-scroll",
                                content: [
                                    m(TextField, {
                                        label: "Username",
                                        required: true,
                                        pattern: "[a-zA-Z0-9]+",
                                        floatingLabel: true,
                                        tight: true,
                                        autofocus: true,
                                        validateOnInput: true,
                                        value: User.current.username,
                                        onChange: function(state) {
                                            User.current.username = state.value
                                        }
                                    }),
                                    m(TextField, {
                                        label: "Password",
                                        type: "password",
                                        required: true,
                                        floatingLabel: true,
                                        tight: true,
                                        value: User.current.password,
                                        onChange: function(state) {
                                            User.current.password = state.value
                                        }
                                    })
                                ]
                            }
                        },
                        {
                            actions: {
                                content: m(RaisedButton, {
                                    element: "button",
                                    label: "Masuk",
                                    type: "submit"
                                })
                            }
                        }
                    ]
                })),
                m(".constant")
            ])))
        ]
    }
}