import SwiftUI

struct PostView: View {

    @Environment(\.language)
    var language

    @ObservedObject
    var post: Post

    @State
    private var showDatePicker = false

    var body: some View {
        VStack(alignment: .center) {
            if !post.images.isEmpty {
                PostImageGalleryView(images: post.displayImages)
                    .aspectRatio(1.33, contentMode: .fill)
            }
            VStack(alignment: .leading) {
                HStack(alignment: .center, spacing: 0) {
                    Text(post.dateText(in: language))
                        .font(.system(size: 19, weight: .semibold))
                        .onTapGesture { showDatePicker = true }
                    Spacer()
                    Toggle("Draft", isOn: $post.isDraft)
                }
                .foregroundStyle(Color(r: 96, g: 186, b: 255))
                TextField("", text: post.title.text(for: language))
                    .font(.system(size: 24, weight: .bold))
                    .foregroundStyle(Color.white)
                    .textFieldStyle(.plain)
                    .lineLimit(2)
                FlowHStack {
                    ForEach(post.tags, id: \.id) { tag in
                        TagView(tag: tag.name)
                            .onTapGesture {
                                remove(tag: tag)
                            }
                    }
                    Button(action: showTagList) {
                        SwiftUI.Image(systemSymbol: .plusCircleFill)
                            .resizable()
                            .aspectRatio(1, contentMode: .fit)
                            .frame(height: 18)
                            .foregroundColor(TagView.foreground)
                            .opacity(0.7)
                            .padding(.top, 3)
                    }
                    .buttonStyle(.plain)
                }
                TextEditor(text: post.text.text(for: language))
                    .font(.body)
                    .foregroundStyle(Color(r: 221, g: 221, b: 221))
                    .textEditorStyle(.plain)
                    .padding(.leading, -5)
                    .scrollDisabled(true)
            }
            .padding()
        }
        .background(Color(r: 4, g: 31, b: 52))
        .cornerRadius(8)
        .sheet(isPresented: $showDatePicker) {
            DatePickerView(post: post, showDatePicker: $showDatePicker)
        }
    }

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

    private func showTagList() {

    }
}

#Preview(traits: .fixedLayout(width: 450, height: 600)) {
    List {
        PostView(post: .fullMock)
            .listRowSeparator(.hidden)
            .listRowBackground(Color(r: 2, g: 15, b: 26))
            .environment(\.language, ContentLanguage.german)
        PostView(post: .mock)
            .listRowSeparator(.hidden)
            .listRowBackground(Color(r: 2, g: 15, b: 26))
    }
    .listStyle(.plain)
}