import SwiftUI
import SFSafeSymbols

struct NavigationBarSettingsView: View {

    @Binding
    var language: ContentLanguage

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

    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                HStack {
                    Text("Links")
                        .font(.headline)
                    Button(action: { showItemPicker = true }) {
                        Image(systemSymbol: .squareAndPencilCircleFill)
                            .resizable()
                            .aspectRatio(1, contentMode: .fit)
                            .frame(height: 22)
                            .foregroundColor(Color.gray)
                            .background(Circle()
                                .fill(Color.white)
                                .padding(1))
                    }
                    .buttonStyle(.plain)
                }
                FlowHStack {
                    ForEach(content.settings.navigation.navigationItems) { tag in
                        TagView(text: tag.title(in: language))
                            .foregroundStyle(.white)
                    }
                }
                Text("Select the tags to show in the navigation bar.")
                    .foregroundStyle(.secondary)
                    . padding(.bottom)
                let localized = content.settings.navigation.localized(in: language)
                LocalizedNavigationBarSettingsView(settings: localized)
            }
            .padding()
        }
        .sheet(isPresented: $showItemPicker) {
            ItemSelectionView(
                isPresented: $showItemPicker,
                selectedItems: $content.settings.navigation.navigationItems)
        }
        .onChange(of: language) { oldValue, newValue in
            print("Language changed from \(oldValue) to \(newValue)")
        }
    }
}

#Preview {
    NavigationBarSettingsView(language: .constant(.english))
        .environmentObject(Content.mock)
        .padding()
}