import m from "mithril"
import { Toolbar, ToolbarTitle, TextField, Button } from "polythene-mithril"
// import { User } from "../models/User"

var email = {
    value: "",
    setValue: function(v) { email.value = v },
    getValue: function() { return email.value }
}

const workflow = [
    {
        number: 1,
        text: "Daftarkan email pada kolom email di atas.",
        subText: "Jika sudah pernah mendaftar, lanjut ke langkah 4"
    },
    {
        number: 2,
        text: "Isi formulir data diri."
    },
    {
        number: 3,
        text: "Server mengirim email berupa kode login."
    },
    {
        number: 4,
        text: "Pilih kuesioner yang akan diisi."
    },
    {
        number: 5,
        text: "Masukkan kode login Anda (langkah 3)."
    },
    {
        number: 6,
        text: "Silahkan isi kuesioner!"
    }
]

export const header = {
    view: function() {
        return [
            m(".header-img", {
                style: {
                    backgroundImage: "url('img/head1.jpg')"
                }
            }),
            m(".header-title#header-top", {
                style: {
                    display: "table",
                    color: "#fff",
                    position: "fixed"
                }
            }, m("div", {
                style: {
                    display: "table-cell",
                    verticalAlign: "middle",
                    textAlign: "center"
                }
            }, [
                m("h1", {
                    style: {
                        fontWeight: "bold"
                    }
                }, [
                    m("i.fa.fa-check-square.fa-fw[aria-hidden=true]"),
                    m.trust(" "),
                    m("span", "Questionnaire"),
                    m.trust(" "),
                    m("i.fa.fa-window-close.fa-fw[aria-hidden=true]")
                ]),
                m("p", "Web-based kuesioner untuk Yayasan Widya Anindya"),
                m("div", { style: { margin: "5em 0" } }),
                m("form", {
                    onsubmit: function(e) {
                        e.preventDefault()
                        /* upload data email */
                        /* alias */
                        // if (email.value == "admin@questionnaire.dev") {
                        //     m.route.set("/questionnaires")
                        // } else if (email.value == "") {
                        //     document.getElementById("header-email")
                        //     .querySelector("input").focus()
                        // } else {
                        //     m.route.set("/auth/register/?invoker=" + email.value)
                        // }
                        m.route.set("/auth/register")
                    }
                }, m(TextField, {
                    label: "E-mail",
                    id: "header-email",
                    name: "email",
                    value: User.current.email,
                    style: {
                        padding: ".3em 1em .8em",
                        borderRadius: "2px"
                    },
                    pattern: "[a-z\-\.0-9]+@[a-z\-\.]+[a-z]+",
                    validateOnInput: true,
                    tone: "dark",
                    onChange: function(state) {
                        User.current.email = state.value
                    },
                    events: {
                        oncreate: function() {
                            var target = document.getElementById("header-email")
                            var selector = target.querySelector("input")
                            selector.onfocus = function() {
                                target.style
                                .backgroundColor = "rgba(0, 0, 0, .5)"
                            }
                            selector.autocomplete = "off"
                            target.removeChild(
                                target.querySelector(
                                    ".pe-textfield__error-placeholder"
                                )
                            )
                        }
                    }
                }),
                m(Button, {
                    element: "button",
                    type: "submit",
                    label: [
                        m("i.fa.fa-check-square-o.fa-fw[aria-hidden=true]"),
                        m.trust(" "),
                        "Mulai"
                    ],
                    style: {
                        backgroundColor: "#fff",
                        padding: ".8em",
                        fontSize: "14px",
                        lineHeight: "14px",
                        fontWeight: "500",
                        textTransform: "uppercase",
                        whiteSpace: "pre",
                    }
                }))
            ])),
            m(".header-content", m("article", {
                style: {
                    backgroundColor: "#fff",
                }
            }, [
                m("h2.article-title", [
                    m("i.fa.fa-rocket[aria-hidden=true]", {
                        style: {
                            color: "rgb(255, 153, 0)"
                        }
                    }),
                    m("div", {
                        style: {
                            marginTop: ".3em"
                        }
                    }, "Workflow")
                ]),
                workflow.map(function(v) {
                    return m(".workflow-items-wrapper.flex", v.number == workflow.length ? {
                        style: {
                            marginBottom: "0"
                        }
                    } : null, [
                        m(".workflow-items", m("div", v.number)),
                        m(".workflow-items-description", m("p", [
                            v.text,
                            !_.isNil(v.subText) ?
                            [
                                m("br"),
                                m("i", "(" + v.subText + ")")
                            ]
                            : null
                        ]))
                    ])
                }),
                m(".article-break"),
                m("h2.article-title", {
                    style: {
                        marginBottom: "0"
                    }
                }, [
                    m("i.fa.fa-space-shuttle.fa-rotate-270[aria-hidden=true]", {
                        style: {
                            color: "rgb(255, 153, 0)",
                            cursor: "pointer",
                            transition: "all .5s ease",
                            webkitTransition: "all .5s ease",
                            mozTransition: "all .5s ease",
                            oTransition: "all .5s ease"
                        },
                        onclick: function() {
                            var scrollValue = 1
                            var scrolling = setInterval(function() {
                                window.scrollTo(0, window.scrollY - scrollValue)
                                if (window.scrollY <= 100) {
                                    scrollValue--
                                } else if (window.scrollY <= 0) {
                                    window.clearInterval(scrolling)
                                    document.getElementById("header-email")
                                    .querySelector("input").focus()
                                } else {
                                    scrollValue++
                                }
                            }, 10)
                        },
                        onmouseover: function() {
                            this.style.transform = "translateY(-0.2em) rotate(270deg)"
                            var target = document.getElementById("ready-text")
                            target
                            .style.color = "rgb(255, 153, 0)"
                            target
                            .innerHTML = target.innerHTML.replace("?", "!")
                        },
                        onmouseout: function() {
                            this.style.transform = "translateY(0) rotate(270deg)"
                            var target = document.getElementById("ready-text")
                            target
                            .style.color = "rgb(0, 0, 0)"
                            target
                            .innerHTML = target.innerHTML.replace("!", "?")
                        }
                    }),
                    m("#ready-text", {
                        style: {
                            marginTop: ".3em"
                        }
                    }, "Siap?")
                ]),
                m(".article-break")
            ]))
        ]
    }
}