import SwiftUI
import HighlightedTextEditor

struct PageTitleView: View {

    @ObservedObject
    var page: LocalizedPage

    var body: some View {
        TextField("", text: $page.title)
            .font(.title)
            .textFieldStyle(.plain)
    }
}

struct PageContentView: View {

    @ObservedObject
    var page: Page

    @Environment(\.language)
    private var language

    @EnvironmentObject
    private var content: Content

    @State
    private var showTagPicker = false

    init(page: Page) {
        self.page = page
    }

    var body: some View {
        if page.isExternalUrl {
            VStack {
                PageTitleView(page: page.localized(in: language))
                    .id(page.id + language.rawValue)
                Spacer()
                Text("No content available for external page")
                    .font(.title)
                    .foregroundStyle(.secondary)
                Spacer()
            }.padding()
        } else {
            VStack(alignment: .leading) {
                FlowHStack {
                    ForEach(page.tags, id: \.id) { 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)
                }
                LocalizedPageContentView(pageId: page.id, page: page.localized(in: language), language: language)
                    .id(page.id + language.rawValue)
            }.padding()
            .sheet(isPresented: $showTagPicker) {
                TagSelectionView(
                    presented: $showTagPicker,
                    selected: $page.tags,
                    tags: $content.tags)
            }
        }
    }
    

}

extension PageContentView: MainContentView {

    init(item: Page) {
        self.page = item
    }

    static let itemDescription = "a page"
}

#Preview {
    PageContentView(page: .empty)
}