import SwiftUI
import SFSafeSymbols

struct PostView: View {

    @ObservedObject
    var post: Post

    @Environment(\.language)
    private var language

    var body: some View {
        LocalizedPostView(post: post, localized: post.localized(in: language))
    }
}


struct LocalizedPostView: View {

    @ObservedObject
    var post: Post

    @ObservedObject
    var localized: LocalizedPost

    @State
    private var showDatePicker = false

    @State
    private var showImagePicker = false

    @State
    private var showTagPicker = false

    @Environment(\.language)
    private var language

    @EnvironmentObject
    private var content: Content

    var body: some View {
        VStack(alignment: .center) {
            if localized.images.isEmpty {
                Button(action: { showImagePicker = true }) {
                    Text("Add image")
                }
                .buttonStyle(.plain)
                .foregroundStyle(.blue)
                .padding(.top)
            } else {
                PostImageGalleryView(post: localized)
                    .aspectRatio(1.33, contentMode: .fill)
            }
            VStack(alignment: .leading) {
                Text(post.dateText(in: language))
                    .font(.system(size: 19, weight: .semibold))
                    .foregroundStyle(.secondary)
                TextField("", text: $localized.title)
                    .font(.system(size: 24, weight: .bold))
                    .foregroundStyle(Color.primary)
                    .textFieldStyle(.plain)
                    .lineLimit(2)
                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.blue)
                            .background(Circle()
                                .fill(Color.white)
                                .padding(1))
                    }
                    .buttonStyle(.plain)
                }
                TextEditor(text: $localized.content)
                    .font(.body)
                    .foregroundStyle(.secondary)
                    .textEditorStyle(.plain)
                    .padding(.leading, -5)
                    .scrollDisabled(true)
            }
            .padding()
        }
        .background(Color(NSColor.windowBackgroundColor))
        .cornerRadius(8)
        .sheet(isPresented: $showDatePicker) {
            DatePickerView(
                post: post,
                showDatePicker: $showDatePicker)
        }
        .sheet(isPresented: $showImagePicker) {
            ImagePickerView(showImagePicker: $showImagePicker) { image in
                localized.images.append(image)
            }
        }
        .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 {
        PostView(post: .fullMock)
            .listRowSeparator(.hidden)
            .environment(\.language, ContentLanguage.german)
        PostView(post: .mock)
            .listRowSeparator(.hidden)
    }
    .environmentObject(Content.mock)
    //.listStyle(.plain)
}