import SwiftUI
import FlixyDesign

/// Der erste Buchstabe auf einer Scheibe.
///
/// **Kein Platzhalterbild.** Jellyfin gibt kein Profilbild heraus, ohne dass
/// eines hinterlegt ist, und am Konto führt die App heute keines mit. Ein
/// Buchstabe ist ehrlicher als eine graue Silhouette, die bei jedem gleich
/// aussieht — und man erkennt an ihm wenigstens, mit welchem Konto man
/// angemeldet ist.
///
/// Stand bis eben in `AccountBar` und wird jetzt zweimal gebraucht: dort in
/// der Seitenleiste und auf dem iPhone oben rechts, wo seit dem Wegfall des
/// Einstellungen-Tabs der Weg dorthin liegt.
struct AccountAvatar: View {
    let name: String
    var diameter: CGFloat = 26

    @Environment(\.flixyAccent) private var accent

    var body: some View {
        Text(name.prefix(1).uppercased())
            // Mit der Scheibe wachsen, nicht fest: oben rechts auf dem
            // Telefon ist er grösser als in der Leiste, und ein Buchstabe in
            // Kleinschrift auf einer grossen Scheibe sieht aus wie ein
            // Fehler.
            .font(.system(size: diameter * 0.46, weight: .semibold))
            .foregroundStyle(Color.flixyCanvas)
            .frame(width: diameter, height: diameter)
            .background(accent, in: .circle)
    }
}

extension EnvironmentValues {
    /// Öffnet die Einstellungen.
    ///
    /// **Über die Umgebung, weil der Knopf an mehreren Stellen steht.** Das
    /// Blatt gehört der Wurzel — nur sie überlebt den Wechsel des Bereichs.
    /// Jeder Bildschirm, der den Knopf zeigt, müsste den Weg dorthin sonst
    /// als Argument durchgereicht bekommen.
    @Entry var flixyOpenSettings: () -> Void = {}
}

/// Das Monogramm als Knopf für eine Werkzeugleiste.
///
/// **Als Ansicht und nicht als Modifikator.** Ein Modifikator hängt seine
/// Einträge aussen an, und SwiftUI reiht aussen zuerst — das Monogramm stand
/// damit **vor** Suche, Filter und Ansicht statt dahinter. Wo in der Reihe es
/// steht, kann nur der entscheiden, der die Reihe schreibt.
struct AccountToolbarButton: View {
    @Environment(FlixySession.self) private var session
    @Environment(\.flixyOpenSettings) private var openSettings

    var body: some View {
        Button(action: openSettings) {
            AccountAvatar(name: session.accountName ?? session.serverName, diameter: 34)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(Text("sidebar.settings"))
    }
}