import SwiftUI

struct SettingsSheet: View {

    private let sidebarWidth: CGFloat = 250

    private let contentWidth: CGFloat = 300

    @Environment(\.dismiss)
    private var dismiss

    @Binding
    var language: ContentLanguage

    @State
    var section: SettingsSection = .general

    private var title: String {
        switch section {
        case .general: "General Settings"
        case .paths: "Folder Settings"
        case .navigationBar: "Navigation Bar Settings"
        case .postFeed: "Post Feed Settings"
        case .pages: "Pages Settings"
        case .tagOverview: "Tag Overview Settings"
        case .audioPlayer: "Audio Player Settings"
        }
    }

    private var text: String {
        switch section {
        case .general: "General settings for the webpage"
        case .paths: "Select the folders for the app to work."
        case .navigationBar: "Customize the navigation bar for all pages at the top of the website"
        case .postFeed: "Change the way the posts are displayed"
        case .pages: "Change the way pages are displayed"
        case .tagOverview: "Configure the page showing all tags"
        case .audioPlayer: "Configure the files and settings for the audio player components"
        }
    }

    var body: some View {
        VStack(spacing: 0) {
            VStack(alignment: .leading) {
                HStack(alignment: .top) {
                    Text(title)
                        .font(.largeTitle)
                        .bold()
                    Spacer()
                    HStack(alignment: .center) {
                        Picker("", selection: $language) {
                            Text("English")
                                .tag(ContentLanguage.english)
                            Text("German")
                                .tag(ContentLanguage.german)
                        }
                        .pickerStyle(.segmented)
                        Button(action: { dismiss() }) {
                            Text("Close")
                        }
                    }.frame(width: 200)
                }
                Text(text)
                    .foregroundStyle(.secondary)
                    .padding(.bottom, 30)

            }
            .frame(height: 100)
            .padding()
            .background(Color(NSColor.windowBackgroundColor))
            NavigationSplitView {
                SettingsListView(section: $section)
                    .navigationSplitViewColumnWidth(min: sidebarWidth, ideal: sidebarWidth, max: sidebarWidth)
            } detail: {
                SettingsContentView(language: $language, section: $section)
            }
        }.frame(width: 600, height: 600)
    }
}