use iris::winit::{UiState, event::Edited};
use openworm::net::ClientMsg;

use crate::{net::AppHandle, state::ClientState};

use super::*;

pub fn start_screen(client: &mut Client, ui: &mut Ui) -> WidgetId {
    let mut accounts = Span::empty(Dir::DOWN);

    accounts.push(
        wtext("no accounts")
            .size(20)
            .center_text()
            .color(Color::GRAY)
            .height(60)
            .add(ui)
            .any(),
    );

    (
        wtext("Select Account").text_align(Align::CENTER).size(30),
        accounts,
        (
            submit_button("connect", |_, _| {}),
            submit_button("create", |_, _| {}),
        )
            .span(Dir::RIGHT)
            .gap(10),
    )
        .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 connect_screen(client: &mut Client, ui: &mut Ui, state: &UiState) -> WidgetId {
    let Client { data, proxy, .. } = client;
    let ip = field_widget(&data.ip, "ip", ui);
    let ip_ = ip.clone();
    let handle = AppHandle {
        proxy: proxy.clone(),
        window: state.window.clone(),
    };
    let submit = submit_button("connect", move |client, ui| {
        let ClientState::Connect(state) = &mut client.state else {
            return;
        };
        let ip = ui[&ip_].content();
        state.handle = Some(connect(handle.clone(), ConnectInfo { ip }));
    });
    (
        wtext("connect to a server")
            .text_align(Align::CENTER)
            .size(30),
        field_box(
            // NOTE: should probably do this on submit
            ip.on(Edited, |ctx| {
                ctx.state.data.ip = ctx.ui[ctx.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, ui: &mut Ui) -> WidgetId {
    let Client { data, .. } = 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, ui| {
        let ClientState::Login(state) = &mut client.state else {
            return;
        };
        let username = ui[&username_].content();
        let password = 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, ui| {
        let ClientState::Login(state) = &mut client.state else {
            return;
        };
        let username = ui[&username_].content();
        let password = ui[&password_].content();
        state
            .handle
            .send(ClientMsg::CreateAccount { username, password });
    });
    (
        wtext("login to server").text_align(Align::CENTER).size(30),
        field_box(
            username
                .on(Edited, |ctx| {
                    ctx.state.data.username = ctx.ui[ctx.id].content();
                })
                .add(ui),
            ui,
        ),
        field_box(
            password
                .on(Edited, |ctx| {
                    ctx.state.data.password = ctx.ui[ctx.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()
}