import SwiftUI

struct PostView: View {

    @Environment(\.language)
    var language

    @ObservedObject
    var post: Post

    @State
    private var showDatePicker = false

    @State
    private var showPagePicker = false

    private var linkedPageText: String {
        if let page = post.linkedPage {
            return page.localized(in: language).title
        }
        return "Add linked page"
    }

    var body: some View {
        VStack(alignment: .center) {
            if !post.localized(in: language).images.isEmpty {
                PostImageGalleryView(images: post.localized(in: language).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(ColorPalette.postDate)
                TextField("", text: post.localized(in: language).editableTitle())
                    .font(.system(size: 24, weight: .bold))
                    .foregroundStyle(Color.white)
                    .textFieldStyle(.plain)
                    .lineLimit(2)
                FlowHStack {
                    ForEach(post.tags, id: \.id) { tag in
                        TagView(tag: .init(
                            en: tag.english.name,
                            de: tag.german.name)
                        )
                        .onTapGesture {
                            remove(tag: tag)
                        }
                    }
                    Button(action: showTagList) {
                        SwiftUI.Image(systemSymbol: .plusCircleFill)
                            .resizable()
                            .aspectRatio(1, contentMode: .fit)
                            .frame(height: 18)
                            .foregroundColor(ColorPalette.tagForeground)
                            .opacity(0.7)
                            .padding(.top, 3)
                    }
                    .buttonStyle(.plain)
                }
                TextEditor(text: post.localized(in: language).editableContent())
                    .font(.body)
                    .foregroundStyle(ColorPalette.postText)
                    .textEditorStyle(.plain)
                    .padding(.leading, -5)
                    .scrollDisabled(true)
                HorizontalCenter {
                    Button(action: { showPagePicker = true }) {
                        Text(linkedPageText)
                    }
                    .buttonStyle(.plain)
                    .foregroundStyle(ColorPalette.postDate)
                }
            }
            .padding()
        }
        .background(ColorPalette.postBackground)
        .cornerRadius(8)
        .sheet(isPresented: $showDatePicker) {
            DatePickerView(
                post: post,
                showDatePicker: $showDatePicker)
        }
        .sheet(isPresented: $showPagePicker) {
            PagePickerView(
                showPagePicker: $showPagePicker,
                selectedPage: $post.linkedPage)
        }
    }

    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(ColorPalette.listBackground)
            .environment(\.language, ContentLanguage.german)
        PostView(post: .mock)
            .listRowSeparator(.hidden)
            .listRowBackground(ColorPalette.listBackground)
    }
    .listStyle(.plain)
}