import SwiftUI

struct NavigationBarSettingsView: View {

    @Environment(\.language)
    private var language

    @EnvironmentObject
    private var content: Content
    
    @State
    private var showTagPicker = false

    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                Text("Navigation Bar")
                    .font(.largeTitle)
                    .bold()
                Text("Customize the navigation bar for all pages at the top of the website")
                    .foregroundStyle(.secondary)
                    .padding(.bottom, 30)

                Text("Visible Tags")
                    .font(.headline)
                FlowHStack {
                    ForEach(content.settings.navigationTags) { tag in
                        TagView(text: tag.localized(in: language).name)
                        .foregroundStyle(.white)
                    }
                    Button(action: { showTagPicker = true }) {
                        Image(systemSymbol: .squareAndPencilCircleFill)
                            .resizable()
                            .aspectRatio(1, contentMode: .fit)
                            .frame(height: 22)
                            .foregroundColor(Color.gray)
                            .background(Circle()
                                .fill(Color.white)
                                .padding(1))
                    }
                    .buttonStyle(.plain)
                }
                Text("Select the tags to show in the navigation bar. The number should be even.")
                    .foregroundStyle(.secondary)
            }
        }
        .sheet(isPresented: $showTagPicker) {
            TagSelectionView(
                presented: $showTagPicker,
                selected: $content.settings.navigationTags,
                tags: $content.tags)
        }
    }
}

#Preview {
    NavigationBarSettingsView()
        .environmentObject(Content.mock)
        .padding()
}