use leptos::{
    IntoView, ev,
    html::{ElementChild, button},
    logging::log,
    prelude::{OnAttribute, Read, Show, ShowProps, ToChildren},
    server::LocalResource,
    task::spawn_local,
};
use wasm_bindgen_futures::JsFuture;
use web_sys::HtmlAudioElement;

use crate::media::audio;

pub fn app() -> impl IntoView {
    let audio_stream = LocalResource::new(|| audio());
    let props = ShowProps::builder()
        .when(move || audio_stream.read().is_some())
        .children(ToChildren::to_children(move || {
            let audio_element = HtmlAudioElement::new().unwrap();
            let audio_stream = audio_stream.read();
            let audio_stream = audio_stream.as_deref();
            audio_element.set_src_object(audio_stream);
            button()
                .on(ev::click, move |_| match audio_element.play() {
                    Ok(audio_element_play_promise) => {
                        log!("{}", "Play will");
                        spawn_local(async move {
                            JsFuture::from(audio_element_play_promise).await.ok();
                        });
                        log!("{}", "Play must");
                    }
                    Err(err_val) => log!("{:#?}", err_val),
                })
                .child("Happy Button")
                .into_view()
        }))
        .fallback(|| button().child("Sad Button"))
        .build();
    Show(props)
}