//
//  SettingsView.swift
//  OnCue
//
//  Created by Pradyun Setti on 23/06/2024.
//

import SwiftUI

struct SettingsView: View {
    @Environment(\.dismiss) var dismiss
    
//    @State private var teleprompterSeparator = "---"
    
    @AppStorage(Preferences.watchConnectivity) var watchConnectivity = false
    
    @AppStorage(Preferences.cueDefaultSize) var cueDefaultSize = 25.0
    
    @AppStorage(Preferences.teleSeparator) var teleprompterSeparator: String = "---"
    @AppStorage(Preferences.teleDefaultSize) var teleDefaultSize = 45.0
    @AppStorage(Preferences.teleAutoScroll) var teleAutoScroll = false
    @AppStorage(Preferences.teleAutoScrollSpeed) var teleAutoScrollSpeed = 1.0
    
//    @State private var themesColor: Color = .blue
    @AppStorage(Preferences.themeColour) var themesColor = Color.blue.toHex()!
    @AppStorage(Preferences.showTimers) var showTimers = true
    
    var body: some View {
        NavigationView {
            List {
                generalSettings
                cueCardSettings
                teleprompterSettings
                appleWatchSettings
                aboutApp
            }
            .navigationTitle("Settings")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Button("Done") { dismiss() }
                }
            }
        }
    }
    
    var generalSettings: some View {
        Section {
            
            HStack {
                Text("Theme Color")
                // TODO: redo this as a grid
                ScrollView(.horizontal) {
                    HStack {
                        ForEach(Constants.colors, id: \.self) { color in
                            if themesColor == color.toHex()! {
                                ZStack {
                                    Circle()
                                        .foregroundStyle(color)
//                                        .strokeBorder(Color.white,lineWidth: 4)
//                                        .background(Circle().foregroundStyle(color))
                                    Image(systemName: "checkmark")
                                }
                            } else {
                                Circle()
                                    .foregroundStyle(color)
                                    .onTapGesture { themesColor = color.toHex()! }
                            }
                        }
                    }
                }
                .scrollIndicators(.hidden)
            }
            Toggle("Show Timers", isOn: $showTimers)
        } header: { Text("General") }
    }
    
    var cueCardSettings: some View {
        Section {
            Stepper("Default Text Size: \(cueDefaultSize.formatted())", value: $cueDefaultSize, in: 1...100)
        } header: { Text("Cue Cards") }
    }
    
    var teleprompterSettings: some View {
        Section {
            Stepper("Default Text Size: \(teleDefaultSize.formatted())", value: $teleDefaultSize, in: 1...100)
            Toggle("AutoScroll", isOn: $teleAutoScroll)
            if teleAutoScroll {
                Stepper("Default Autoscroll Speed: \(teleAutoScrollSpeed.formatted())", value: $teleAutoScrollSpeed, in: 0.1...10.0, step: 0.1)
            }
        } header: { Text("Teleprompter") }
    }
    
    var appleWatchSettings: some View {
        Section {
            Toggle("Enable Watch Connectivity", isOn: $watchConnectivity)
            if watchConnectivity {
                Button("Test Watch Connection") {}
            }
            
        } header: { Text("Watch") }
    }
    
    var aboutApp: some View {
        Section {
            LabeledContent("Version", value: "1.0b1")
        } header: { Text("About") } footer: { Text("Made with love, by bread <3 🇳🇿") }
    }
}

#Preview {
    SettingsView()
}