import SwiftUI
import HighlightedTextEditor
import SFSafeSymbols

struct PostContentView: View {

    @ObservedObject
    var post: Post

    @Environment(\.language)
    private var language

    var body: some View {
        LocalizedPostContentView(post: post)
    }
}

private struct LocalizedTitle: View {

    @ObservedObject
    private var post: LocalizedPost

    init(post: LocalizedPost) {
        self.post = post
    }

    var body: some View {
        TextField("", text: $post.title)
            .font(.system(size: 24, weight: .bold))
            .foregroundStyle(Color.primary)
            .textFieldStyle(.plain)
            .lineLimit(2)
    }
}

private struct LocalizedContentEditor: View {

    @ObservedObject
    private var post: LocalizedPost

    init(post: LocalizedPost) {
        self.post = post
    }

    var body: some View {
        TextEditor(text: $post.content)
//        HighlightedTextEditor(
//            text: $post.content,
//            highlightRules: .markdown)
    }
}

struct LocalizedPostContentView: View {

    @ObservedObject
    var post: Post

    @State
    private var showTagPicker = false

    @Environment(\.language)
    private var language

    @EnvironmentObject
    private var content: Content

    init(post: Post) {
        self.post = post
    }

    var body: some View {
        VStack(alignment: .leading) {
            Text("Images")
                .font(.headline)
            PostImagesView(post: post.localized(in: language))
            LocalizedTitle(post: post.localized(in: language))
            FlowHStack {
                ForEach(post.tags, id: \.id) { tag in
                    TagView(tag: .init(
                        en: tag.english.name,
                        de: tag.german.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)
            }
            LocalizedContentEditor(post: post.localized(in: language))
        }
        .padding()
        .sheet(isPresented: $showTagPicker) {
            TagSelectionView(
                presented: $showTagPicker,
                selected: $post.tags,
                tags: $content.tags)
        }
    }

    private func remove(tag: Tag) {
        post.tags = post.tags.filter {$0.id != tag.id }
    }
}

#Preview(traits: .fixedLayout(width: 450, height: 600)) {
    List {
        PostContentView(post: .fullMock)
            .listRowSeparator(.hidden)
            .environment(\.language, ContentLanguage.german)
        PostContentView(post: .mock)
            .listRowSeparator(.hidden)
    }
    .environmentObject(Content.mock)
    //.listStyle(.plain)
}