use openworm::net::ClientMsg;

use crate::state::ClientState;

use super::*;

pub fn field_widget(name: &str, hint_text: &str, ui: &mut Ui) -> WidgetId<TextEdit> {
    wtext(name)
        .editable(true)
        .size(20)
        .hint(hint(hint_text))
        .add(ui)
}

pub fn field_box(field: WidgetId<TextEdit>, ui: &mut Ui) -> WidgetId {
    field
        .clone()
        .pad(10)
        .background(rect(Color::BLACK.brighter(0.1)).radius(15))
        .attr::<Selector>(field)
        .add(ui)
        .any()
}

pub fn submit_button(text: &str, on_submit: impl Fn(&mut Client) + 'static) -> impl WidgetRet {
    let color = Color::GREEN;
    rect(color)
        .radius(15)
        .id_on(CursorSense::click(), move |id, client: &mut Client, _| {
            client.ui[id].color = color.darker(0.3);
            on_submit(client);
        })
        .height(40)
        .foreground(wtext(text).size(20).text_align(Align::CENTER))
        .to_any()
}

pub fn connect_screen(client: &mut Client) -> WidgetId {
    let Client {
        data, ui, handle, ..
    } = client;
    let ip = field_widget(&data.ip, "ip", ui);
    let ip_ = ip.clone();
    let handle = handle.clone();
    let submit = submit_button("connect", move |client| {
        let ClientState::Connect(state) = &mut client.state else {
            return;
        };
        let ip = client.ui[&ip_].content();
        state.handle = Some(connect(handle.clone(), ConnectInfo { ip }));
    });
    (
        wtext("connect to a server")
            .text_align(Align::CENTER)
            .size(30),
        field_box(
            ip.id_on(Edited, |id, client: &mut Client, _| {
                client.data.ip = client.ui[id].content();
            })
            .add(ui),
            ui,
        ),
        submit,
    )
        .span(Dir::DOWN)
        .gap(10)
        .pad(15)
        .background(rect(Color::BLACK.brighter(0.2)).radius(15))
        .width(400)
        .align(Align::CENTER)
        .add(ui)
        .any()
}

pub fn login_screen(client: &mut Client) -> WidgetId {
    let Client { data, ui, .. } = client;
    let username = field_widget(&data.username, "username", ui);
    let password = field_widget(&data.password, "password", ui);
    let username_ = username.clone();
    let password_ = password.clone();
    let submit = submit_button("login", move |client| {
        let ClientState::Login(state) = &mut client.state else {
            return;
        };
        let username = client.ui[&username_].content();
        let password = client.ui[&password_].content();
        state.handle.send(ClientMsg::Login { username, password });
    });
    let username_ = username.clone();
    let password_ = password.clone();
    let create_button = submit_button("create account", move |client| {
        let ClientState::Login(state) = &mut client.state else {
            return;
        };
        let username = client.ui[&username_].content();
        let password = client.ui[&password_].content();
        state
            .handle
            .send(ClientMsg::CreateAccount { username, password });
    });
    (
        wtext("login to server").text_align(Align::CENTER).size(30),
        field_box(
            username
                .id_on(Edited, |id, client: &mut Client, _| {
                    client.data.username = client.ui[id].content();
                })
                .add(ui),
            ui,
        ),
        field_box(
            password
                .id_on(Edited, |id, client: &mut Client, _| {
                    client.data.password = client.ui[id].content();
                })
                .add(ui),
            ui,
        ),
        submit,
        create_button,
    )
        .span(Dir::DOWN)
        .gap(10)
        .pad(15)
        .background(rect(Color::BLACK.brighter(0.2)).radius(15))
        .width(400)
        .align(Align::CENTER)
        .add(ui)
        .any()
}