use dioxus::prelude::*;

pub fn Auth() -> Element {
    let mut register = use_signal(|| false);

    rsx! {
        div {
            class: "flex flex-col items-center",
            h1 { class: "font-bold text-primary text-center text-2xl mt-20", "Waddinxveense Reddingsbrigade" },
            div {
                class: "card bg-base-200 mt-20 w-full max-w-lg shadow-xl",
                div {
                    class: "card-body",
                    div {
                        role: "tablist",
                        class: "tabs tabs-boxed bg-base-300 mx-auto w-full mb-10",
                        button {
                            onclick: move |_| register.set(false),
                            role: "tab",
                            class: "tab",
                            class: if !register() { "tab-active" },
                            "Inloggen"
                        },
                        button {
                            onclick: move |_| register.set(true),
                            role: "tab",
                            class: "tab",
                            class: if register() { "tab-active" },
                            "Registreren"
                        },
                    }
                    if !register() {
                        Login { }
                    } else {
                        Register { }
                    }
                }
            }
        }
    }
}

fn Login() -> Element {
    rsx! {
        form {
            label {
                class: "form-control w-full",
                div {
                    class: "label",
                    span { class: "label-text", "Email" },
                }
                input {
                    r#type: "email",
                    class: "input input-bordered w-full",
                },
            }
            label {
                class: "form-control w-full mt-5",
                div {
                    class: "label",
                    span { class: "label-text", "Password" },
                }
                input {
                    r#type: "password",
                    class: "input input-bordered w-full",
                },
            }
            div {
                class: "card-actions mt-8",
                button {
                    class: "btn btn-primary",
                    "Inloggen"
                }
            }
        }
    }
}

fn Register() -> Element {
    rsx! {
        form {
            label {
                class: "form-control w-full",
                div {
                    class: "label",
                    span { class: "label-text", "Registratie code" },
                }
                input {
                    r#type: "text",
                    class: "input input-bordered w-full",
                },
            }
            div {
                class: "card-actions mt-8",
                button {
                    class: "btn btn-primary",
                    "Registreren"
                }
            }
        }
    }
}