import SwiftUI
import FlixyDesign

/// Die Navigation als Reihe über dem Inhalt.
///
/// Dieselben Einträge wie in der Seitenleiste, nur nebeneinander statt
/// untereinander. Sie scrollt waagerecht, weil die Zahl der Mediatheken vom
/// Server kommt und niemand weiß, wie viele es sind — zusammengequetschte
/// Beschriftungen wären die schlechtere Antwort als eine Reihe, die weiterläuft.
struct TopNavigationBar: View {
    let items: [SidebarDestination]
    @Binding var selection: SidebarDestination

    @Environment(\.flixyAccent) private var accent
    @Namespace private var glass

    var body: some View {
        ScrollView(.horizontal) {
            // Ein gemeinsamer Behälter: nebeneinanderliegende Glasflächen
            // verschmelzen darin, statt als einzelne Scheiben übereinander zu
            // liegen.
            GlassEffectContainer(spacing: FlixySpacing.snug) {
                HStack(spacing: FlixySpacing.snug) {
                    ForEach(items, id: \.self) { item in
                        chip(for: item)
                    }
                }
            }
            .padding(.horizontal, FlixySpacing.screenMargin)
            .padding(.vertical, FlixySpacing.snug)
        }
        .scrollIndicators(.hidden)
        .scrollClipDisabled()
    }

    private func chip(for item: SidebarDestination) -> some View {
        let isSelected = item == selection

        return Button {
            selection = item
        } label: {
            Label(item.sidebarLabel, systemImage: item.symbol)
                .font(.flixyCardTitle)
                .lineLimit(1)
                .foregroundStyle(isSelected ? accent : Color.flixyTextSecondary)
                .padding(.horizontal, FlixySpacing.regular)
                .padding(.vertical, FlixySpacing.snug)
        }
        .buttonStyle(.plain)
        .glassEffect(
            isSelected ? .regular.tint(accent.opacity(0.28)).interactive() : .regular.interactive(),
            in: .capsule
        )
        .glassEffectID(item, in: glass)
        .accessibilityAddTraits(isSelected ? [.isButton, .isSelected] : .isButton)
    }
}