use bevy::{input::mouse::MouseWheel, prelude::*};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins.set(WindowPlugin {
            primary_window: Some(Window {
                title: "UI WTF".into(),
                resolution: (640., 480.).into(),
                ..default()
            }),
            ..default()
        }))
        .add_systems(Startup, (init,))
        .add_systems(Update, (scroll,))
        .run();
}

#[derive(Component)]
struct ScrollingList;

fn init(mut commands: Commands) {
    info!("Spawning camera");
    commands.spawn(Camera2dBundle { ..default() });

    info!("Initializing UI");
    commands
        .spawn(NodeBundle {
            background_color: BackgroundColor(Color::WHITE),
            style: Style {
                justify_content: JustifyContent::Center,
                width: Val::Percent(90.0),
                height: Val::Percent(90.0),
                overflow: Overflow::clip(),
                ..default()
            },
            ..default()
        })
        .with_children(|parent| {
            parent
                .spawn((
                    NodeBundle {
                        background_color: BackgroundColor(Color::OLIVE),
                        style: Style {
                            flex_wrap: FlexWrap::Wrap,
                            flex_direction: FlexDirection::Row,
                            justify_content: JustifyContent::SpaceAround,
                            width: Val::Auto,
                            height: Val::Auto,
                            max_width: Val::Auto,
                            max_height: Val::Auto,
                            ..default()
                        },
                        ..default()
                    },
                    ScrollingList,
                ))
                .with_children(|parent| {
                    info!("Initializing Child Element");
                    let colors = [
                        Color::ORANGE,
                        Color::BLUE,
                        Color::GREEN,
                        Color::SALMON,
                        Color::SEA_GREEN,
                        Color::MAROON,
                        Color::ORANGE,
                        Color::BLUE,
                        Color::GREEN,
                        Color::SALMON,
                        Color::SEA_GREEN,
                        Color::MAROON,
                    ];
                    for i in 0..12 {
                        parent.spawn(NodeBundle {
                            background_color: BackgroundColor(colors[i]),
                            style: Style {
                                width: Val::Px(256.0),
                                height: Val::Px(256.0),
                                padding: UiRect::all(Val::Px(5.0)),
                                ..default()
                            },
                            ..default()
                        });
                    }
                });
        });
}

fn scroll(
    mut scroll_evr: EventReader<MouseWheel>,
    mut query: Query<&mut Style, With<ScrollingList>>,
) {
    for ev in scroll_evr.iter() {
        for mut s in query.iter_mut() {
            s.top = match s.top {
                Val::Px(current) => Val::Px(current + (ev.y * 5.0)),
                _ => Val::Px(0.0),
            };
        }
    }
}