import Adw
import Portico

/// Demonstrates breakpoint conditions, typed setters, and apply handlers.
struct BreakpointDemoPage: View {
    @State private var isCompact = false
    @State private var appliedMessage = "No manual breakpoint applied"
    @State private var currentBreakpoint: Breakpoint?
    @WidgetRef private var carousel: Adw.Carousel?

    var body: some View {
        BreakpointBin {
            VStack(spacing: 12) {
                Label("Breakpoint demo")
                    .title1()
                Label { isCompact ? "Compact layout" : "Wide layout" }
                Label { appliedMessage }
                    .dimmed()
                Carousel {
                    Label("Carousel content")
                }
                .ref(_carousel)
                .hexpand(true)
                .vexpand(true)
            }
            .margin(24)
            .hexpand(true)
            .vexpand(true)
        }
        .breakpoint("max-width: 700px", isActive: $isCompact)
        .breakpoint(.maxWidth(500)) {
            Setter(_carousel, "spacing", double: 0)
        }
        .breakpoint("max-width: 400px") { configuration in
            configuration.onApply {
                appliedMessage = "Manual breakpoint applied"
            }
            configuration.onUnapply {
                appliedMessage = "Manual breakpoint unapplied"
            }
        }
        .currentBreakpoint($currentBreakpoint)
        .hexpand(true)
        .vexpand(true)
    }
}