use yew::prelude::*;
use log::info;
use web_sys::{wasm_bindgen::{JsCast, UnwrapThrowExt}, HtmlInputElement};

#[function_component]
fn App() -> Html {
    let rader: UseStateHandle<Vec<String>> = use_state(Vec::new);

    let rader_handle = rader.clone();
    let push_rad = move |rad| {
        info!("{}", rad);
        let handle = rader_handle.clone();
        let mut val = (*handle).clone();
        val.push(rad);
        rader_handle.set(val);
    };

    html! {
        <div>
            <Terminal rader = { (*rader).clone() } />
            <Input { push_rad } />
        </div>
    }
}

#[derive(Properties, PartialEq)]
struct InputProps {
    pub push_rad: Callback<String>
}

#[function_component]
fn Input(props: &InputProps) -> Html {
    let push_rad = props.push_rad.clone();

    let onchange = move |event: Event| {
        let target: HtmlInputElement = event.target().unwrap_throw().dyn_into().unwrap_throw();
        let value = target.value();
        target.set_value("");
        push_rad.emit(value);
    };

    html! {
        <input { onchange } type="text" class="input"/>
    }
}

#[derive(Properties, PartialEq)]
struct TerminalProps {
    pub rader: Vec<String>,
}

#[function_component]
fn Terminal(props: &TerminalProps) -> Html {
    let rader: Vec<_> = props.rader.iter().map(|rad| 
        html! {
            <>
                <span> { rad } </span>
                <br />
            </>
        }
    ).collect();

    html! {
        <div id="terminal" class="terminal">
            { rader }
        </div>
    }
}

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    yew::Renderer::<App>::new().render();
}