import SwiftUI
import FlixyDesign
import FlixyPlayback

/// Wie Untertitel aussehen sollen.
struct SubtitleAppearanceView: View {
    @Environment(SubtitleAppearance.self) private var appearance
    @Environment(\.flixyAccent) private var accent

    var body: some View {
        @Bindable var appearance = appearance

        Form {
            SettingsHeader(
                symbol: "textformat.size",
                colour: SettingsPalette.subtitles,
                title: "subtitleStyle.title",
                explanation: "subtitleStyle.headerExplanation"
            )

            Section {
                preview
            } header: {
                Text("subtitleStyle.previewHeader")
            }

            Section {
                Picker("subtitleStyle.size", selection: $appearance.size) {
                    ForEach(SubtitleStyle.Size.allCases) { size in
                        Text(size.label).tag(size)
                    }
                }
            } footer: {
                Text("subtitleStyle.sizeExplanation")
            }

            Section {
                Picker("subtitleStyle.palette", selection: $appearance.palette) {
                    ForEach(SubtitleStyle.Palette.allCases) { palette in
                        Text(palette.label).tag(palette)
                    }
                }
            } header: {
                Text("subtitleStyle.paletteHeader")
            } footer: {
                // Die Grenze gehört hierher, nicht nur in einen Kommentar:
                // bei eingebrannten Untertiteln tut jede dieser Einstellungen
                // sichtbar nichts, und ohne Erklärung sieht das nach einem
                // Fehler aus.
                Text("subtitleStyle.paletteExplanation")
            }
        }
        .tint(accent)
        .flixyForm()
        .scrollContentBackground(.hidden)
        .background(Color.flixyCanvas)
        .navigationTitle(Text("subtitleStyle.title"))
        .flixyInlineTitle()
    }

    /// Ein Beispielsatz über grauer Fläche.
    ///
    /// **Eine Nachbildung, nicht AVFoundations Renderer.** Sie zeigt die
    /// Wirkung der Einstellung, nicht das Bild auf den Punkt genau — wer
    /// später zwei Pixel „repariert", repariert die falsche Sache.
    private var preview: some View {
        ZStack {
            // Mittelgrau: auf Weiss wäre weisse Schrift unsichtbar, auf
            // Schwarz schwarze. Ein Grauton zeigt beide ehrlich.
            LinearGradient(
                colors: [Color(white: 0.35), Color(white: 0.18)],
                startPoint: .top,
                endPoint: .bottom
            )

            Text("subtitleStyle.previewText")
                .font(.system(size: 15 * CGFloat(appearance.size.rawValue) / 100, weight: .medium))
                .foregroundStyle(appearance.style.foreground.color)
                .padding(.horizontal, 8)
                .padding(.vertical, 3)
                .background(appearance.style.background.color)
                .shadow(
                    color: appearance.style.wantsEdgeShadow ? .black.opacity(0.9) : .clear,
                    radius: 2,
                    y: 1
                )
                .padding(FlixySpacing.regular)
        }
        .frame(height: 96)
        .clipShape(.rect(cornerRadius: FlixyRadius.card))
        .listRowInsets(EdgeInsets())
        .listRowBackground(Color.clear)
    }
}

extension SubtitleStyle.RGBA {
    var color: Color {
        Color(.sRGB, red: red, green: green, blue: blue, opacity: alpha)
    }
}