import SwiftUI
import FlixyDesign

/// Das farbige Symbol vor einer Einstellungszeile.
///
/// Nicht Zierde: in einer Liste aus zehn gleich aussehenden Zeilen findet das
/// Auge nichts wieder. Eine Farbe je Bereich macht „das mit dem blauen Zahnrad"
/// zu einer brauchbaren Beschreibung — und genau so sucht man Einstellungen,
/// die man schon einmal gesehen hat.
///
/// Die Farben sind fest und **nicht** die Akzentfarbe: wenn alles die gleiche
/// Farbe trägt, unterscheidet sie nichts mehr.
struct SettingsIcon: View {
    let symbol: String
    let colour: Color

    var body: some View {
        Image(systemName: symbol)
            .font(.caption.weight(.semibold))
            .foregroundStyle(.white)
            .frame(width: 28, height: 28)
            .background(colour.gradient, in: .rect(cornerRadius: 7))
    }
}

/// Die Kopfkarte eines Einstellungsbildschirms.
///
/// Sagt in einem Satz, worum es hier geht. Das klingt nach Zierde, ist aber
/// der Unterschied zwischen „Wiedergabe" und „hier stelle ich ein, wie weit
/// der Doppeltipp springt" — und erspart das Durchprobieren aller Schalter.
struct SettingsHeader: View {
    let symbol: String
    let colour: Color
    let title: LocalizedStringKey
    let explanation: LocalizedStringKey

    var body: some View {
        VStack(alignment: .leading, spacing: FlixySpacing.regular) {
            Image(systemName: symbol)
                .font(.title2.weight(.semibold))
                .foregroundStyle(.white)
                .frame(width: 52, height: 52)
                .background(colour.gradient, in: .rect(cornerRadius: 13))

            Text(title)
                .font(.flixyTitle)
                .foregroundStyle(Color.flixyTextPrimary)

            Text(explanation)
                .font(.flixyCaption)
                .foregroundStyle(Color.flixyTextSecondary)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(.vertical, FlixySpacing.snug)
        .listRowBackground(Color.flixySurface)
    }
}

/// Die Farben der Bereiche, an einer Stelle.
enum SettingsPalette {
    static let server = Color.gray
    static let appearance = Color.blue
    static let home = Color.green
    static let playback = Color.pink
    static let languages = Color.teal
    static let subtitles = Color.yellow
    static let downloads = Color.indigo
    static let diagnostics = Color.orange
}