import io.wispforest.owo.ui.base.BaseOwoScreen;
import io.wispforest.owo.ui.component.ColorPickerComponent;
import io.wispforest.owo.ui.component.Components;
import io.wispforest.owo.ui.container.Containers;
import io.wispforest.owo.ui.container.FlowLayout;
import io.wispforest.owo.ui.core.*;
import net.minecraft.text.Text;
import org.jetbrains.annotations.NotNull;

import java.util.List;

public class MyFirstScreen extends BaseOwoScreen<FlowLayout> {

    @Override
    protected @NotNull OwoUIAdapter<FlowLayout> createAdapter() {
        return OwoUIAdapter.create(this, Containers::verticalFlow);
    }

    @Override
    protected void build(FlowLayout rootComponent) {
        var title = Components.label(Text.of("REACH DISPLAY")).margins(Insets.bottom(10));

        var scaleSlider = Components.slider(Sizing.fill(30)).message(s -> Text.of(s));
        var scaleLabel = Components.label(Text.of("Scale")).shadow(true).margins(Insets.right(10));

        var textColorPicker = Containers.collapsible(Sizing.content(),Sizing.content(),Text.of("Color"),true).child( new ColorPickerComponent().sizing(Sizing.fill(30)));
        var textColorLabel = Components.label(Text.of("Text Color")).shadow(true).tooltip(Text.of("ToolTip")).margins(Insets.right(10));

        var dropdownLabel = Components.label(Text.of("Dropdown")).tooltip(Text.of("ToolTip")).margins(Insets.right(10));
        var dropdown = Components.dropdown(Sizing.fill(20)).children(List.of(Components.label(Text.of("Dropdown")),Components.label(Text.of("Dropdown")),Components.label(Text.of("Dropdown")),Components.label(Text.of("Dropdown"))));

        var grid = Containers.grid(Sizing.content(), Sizing.content(), 3, 3)
                .child(scaleLabel, 0, 0)
                .child(scaleSlider, 0, 1)
                .child(textColorLabel, 1, 0)
                .child(textColorPicker, 1, 1)
                .child(dropdownLabel,2,0)
                .child(dropdown,2,1)
                .verticalAlignment(VerticalAlignment.CENTER)
                .horizontalAlignment(HorizontalAlignment.LEFT);
                ;

        var wrapper = Containers.verticalFlow(Sizing.content(), Sizing.content())
                .children(List.of(title, grid))
                .padding(Insets.of(10)) //
                .surface(Surface.VANILLA_TRANSLUCENT)
                .verticalAlignment(VerticalAlignment.CENTER)
                .horizontalAlignment(HorizontalAlignment.CENTER);

        rootComponent.child(wrapper);
    }
}`