//! This example illustrates scrolling in Bevy UI.

use games::*;

fn main() {
    let mut app = App::new();
    app.add_plugins(BaseGamePlugin::default())
        .add_systems(Startup, (setup_list, setup_nav_tree));
    app.run();
}

fn setup_list(mut commands: Commands) {
    // Scrolling list
    commands
        .spawn((
            Node {
                flex_direction: FlexDirection::Column,
                // If height is not set, we need both align_self: Stetch and overflow: scroll()
                height: Val::Percent(50.0),
                // align_self: AlignSelf::Stretch,
                overflow: Overflow::scroll(),
                ..default()
            },
            BackgroundColor(RED.into()),
        ))
        .with_children(|parent| {
            // List items
            (0..250).for_each(|i| {
                parent.spawn(Text(format!("Item {i}")));
            });
        })
        .observe(scroll);
}

fn setup_nav_tree(mut commands: Commands) {
    // Nav Tree
    commands
        .spawn((
            Node {
                position_type: PositionType::Absolute,
                right: Val::Px(0.0),
                top: Val::Percent(50.0),
                min_width: Val::Px(25.0),
                min_height: Val::Px(25.0),
                ..default()
            },
            BackgroundColor(RED.into()),
        ))
        .with_children(|parent| {
            parent
                .spawn((
                    Node {
                        position_type: PositionType::Absolute,
                        right: Val::Px(25.0),
                        min_width: Val::Px(25.0),
                        min_height: Val::Px(25.0),
                        ..default()
                    },
                    BackgroundColor(ORANGE.into()),
                ))
                .with_children(|parent| {
                    parent.spawn((
                        Node {
                            position_type: PositionType::Absolute,
                            right: Val::Px(25.0),
                            min_width: Val::Px(25.0),
                            min_height: Val::Px(25.0),
                            ..default()
                        },
                        BackgroundColor(YELLOW.into()),
                    ));
                });
        });
}