use web_sys::HtmlInputElement;
use yew::prelude::*;

use crate::api;

#[derive(Properties, PartialEq)]
pub struct Props {
    pub on_login: Callback<()>,
}

#[function_component(LoginPage)]
pub fn login_page(props: &Props) -> Html {
    let username = use_state(String::new);
    let password = use_state(String::new);
    let error = use_state(|| None::<String>);

    let on_submit = {
        let username = username.clone();
        let password = password.clone();
        let error = error.clone();
        let on_login = props.on_login.clone();
        Callback::from(move |e: SubmitEvent| {
            e.prevent_default();
            let u = (*username).clone();
            let p = (*password).clone();
            let error = error.clone();
            let on_login = on_login.clone();
            wasm_bindgen_futures::spawn_local(async move {
                match api::login(&u, &p).await {
                    Ok(_) => on_login.emit(()),
                    Err(e) => error.set(Some(e.0)),
                }
            });
        })
    };

    html! {
        <div class="auth-page">
            <div class="auth-card">
                <h1>{ "Shanty" }</h1>
                <p class="text-muted">{ "Sign in to continue" }</p>

                if let Some(ref err) = *error {
                    <div class="error">{ err }</div>
                }

                <form onsubmit={on_submit}>
                    <div class="form-group">
                        <label>{ "Username" }</label>
                        <input type="text" autocomplete="username" value={(*username).clone()}
                            oninput={let u = username.clone(); Callback::from(move |e: InputEvent| {
                                let input: HtmlInputElement = e.target_unchecked_into();
                                u.set(input.value());
                            })} />
                    </div>
                    <div class="form-group">
                        <label>{ "Password" }</label>
                        <input type="password" autocomplete="current-password" value={(*password).clone()}
                            oninput={let p = password.clone(); Callback::from(move |e: InputEvent| {
                                let input: HtmlInputElement = e.target_unchecked_into();
                                p.set(input.value());
                            })} />
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 1rem;">
                        { "Sign In" }
                    </button>
                </form>
            </div>
        </div>
    }
}