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

mod commands;

fn get_prompt() -> String {
    "[user@vanten-s.com ~]$ ".to_string()
}

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

    let rader_handle = rader.clone();
    let push_rad = move |rad: String| {
        info!("{}", rad);
        let handle = rader_handle.clone();
        let mut val = (*handle).clone();
        val.push(get_prompt() + &rad + "\n");
        commands::run(rad, val, handle);
    };

    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 onkeydown = move |e: KeyboardEvent| {
        if e.code() != "Enter" {
            return;
        }
        let target: HtmlInputElement = e.target().unwrap_throw().dyn_into().unwrap_throw();
        let value = target.value();
        let value = value;
        target.set_value("");
        push_rad.emit(value);
    };

    html! {
        <>
            <code>{ get_prompt() }</code><input { onkeydown } 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! {
                <>
                    <code> { rad } </code>
                </>
            }
        })
        .collect();

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

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