se seed::{*, prelude::*};

// Model

struct Model {
    count: i32,
    what_we_count: String,
    change_lang: i32,
}

// Setup a default here, for initialization later.
impl Default for Model {
    fn default() -> Self {
        Self {
            count: 0,
            what_we_count: "click".into(),
            change_lang: 1,
        }
    }
}


// Update

#[derive(Clone)]
enum Msg {
    Increment,
    Decrement,
    ChangeWWC(String),
    ChangeLangENG,
    ChangeLangUKR,
    ChangeLangRUS,
}

/// How we update the model
fn update(msg: Msg, model: &mut Model, _orders: &mut impl Orders<Msg>) {
    match msg {
        Msg::Increment => model.count += 1,
        Msg::Decrement => model.count -= 1,
        Msg::ChangeWWC(what_we_count) => model.what_we_count = what_we_count,
        Msg::ChangeLangENG => model.change_lang = 1,
        Msg::ChangeLangUKR => model.change_lang = 2,
        Msg::ChangeLangRUS => model.change_lang = 3,
    }
}


// View

/// A simple component.
fn success_level(clicks: i32) -> Node<Msg> {
    let descrip = match clicks {
        0 ..= 5 => "Not very many 🙁",
        6 ..= 9 => "I got my first real six-string 😐",
        10 ..= 11 => "Spinal Tap 🙂",
        _ => "Double pendulum 🙃"
    };
    p![ descrip ]
}

fn langauge_settings_header(change_lang: i32) -> Node<Msg> {
    let langy = match change_lang {
        2 => "Привіт",
        3 => "Здравствуйте",
        _ => "Hello",
    };
    p![langy]
}

fn langauge_settings_main(change_lang: i32) -> Node<Msg> {
    let langy = match change_lang {
        2 => "як ти",
        3 => "Как ты",
        _ => "How are you?",
    };
    p![langy]
}

/// The top-level component we pass to the virtual dom.
fn view(model: &Model) -> impl View<Msg> {
    let plural = if model.count == 1 {""} else {"s"};

    // Attrs, Style, Events, and children may be defined separately.
    let outer_style = style!{
            St::Display => "flex";
            St::FlexDirection => "column";
            St::TextAlign => "center"
    };

    div![ outer_style,
        h1![langauge_settings_header(model.change_lang)],
        div![
            style!{
                // Example of conditional logic in a style.
                St::Color => if model.count > 4 {"purple"} else {"gray"};
                St::Border => "2px solid #004422";
                St::Padding => unit!(20, px);
            },
            // We can use normal Rust code and comments in the view.
            h3![ format!("{} {}{} so far", model.count, model.what_we_count, plural) ],
            button![ simple_ev(Ev::Click, Msg::Increment), "+" ],
            button![ simple_ev(Ev::Click, Msg::Decrement), "-" ],
            button![ simple_ev(Ev::Click, Msg::ChangeLangENG), "Eng" ],
            button![ simple_ev(Ev::Click, Msg::ChangeLangUKR), "ukr" ],
            button![ simple_ev(Ev::Click, Msg::ChangeLangRUS), "Rus" ],


            // Optionally-displaying an element
            h2![langauge_settings_main(model.change_lang)],
            if model.count >= 10 { h2![ style!{St::Padding => px(50)}, "Nice!" ] } else { empty![] }
        ],
        success_level(model.count),  // Incorporating a separate component
        langauge_settings_header(model.change_lang),
        h3![ "What are we counting?" ],
        input![ attrs!{At::Value => model.what_we_count}, input_ev(Ev::Input, Msg::ChangeWWC) ],
    ]
}


#[wasm_bindgen(start)]
pub fn render() {
    App::builder(update, view)
        .build_and_start();
}