use super::*;

pub fn view(rsc: &mut Rsc) -> StrongWidget {
    let msg_panel = msg_panel(rsc);
    let side_bar = rect(Color::BLACK.alpha(150)).width(260);

    (side_bar, msg_panel).span(Dir::RIGHT).add_strong(rsc)
}

pub fn msg_widget(username: &str, content: &str) -> impl WidgetIdFn<Rsc> {
    let content = wtext(content)
        .editable(EditMode::MultiLine)
        .size(SIZE)
        .wrap(true)
        .attr::<Selectable>(());
    let header = wtext(username).size(SIZE);
    (
        image(include_bytes!("../assets/sungals.png"))
            .sized((70, 70))
            .align(Align::TOP),
        (header, content)
            .span(Dir::DOWN)
            .gap(10)
            .width(rest(1))
            .align(Align::TOP),
    )
        .span(Dir::RIGHT)
        .gap(10)
        .to_any()
}

pub fn msg_panel(rsc: &mut Rsc) -> WeakWidget {
    let msg_area = Span::empty(Dir::DOWN).gap(15);

    let send_text = wtext("")
        .editable(EditMode::MultiLine)
        .size(SIZE)
        .wrap(true)
        .hint(hint_text("send message"))
        .add(rsc);

    let msg_area = msg_area.add(rsc);

    (
        msg_area
            .scrollable()
            .pad(Padding::x(15).with_top(15))
            .height(rest(1)),
        send_text
            .on(Submit, move |ctx, rsc| {
                let content = ctx.widget.edit(rsc).take();
                let msg = msg_widget("ur mothe:", &content).add_strong(rsc);
                rsc[msg_area].children.push(msg);
            })
            .pad(15)
            .attr::<Selector>(send_text)
            .scrollable()
            .masked()
            .background(rect(Color::BLACK.brighter(0.05)).radius(15))
            .pad(15)
            .max_height(rel(0.5))
            .layer_offset(1),
    )
        .span(Dir::DOWN)
        .width(rest(1))
        .add(rsc)
}