import SwiftUI

private struct DetailListItem<Content>: View where Content: View {

    private let alignment: VerticalAlignment

    private let spacing: CGFloat?

    private let content: Content

    init(alignment: VerticalAlignment = .center,
         spacing: CGFloat? = nil,
         @ViewBuilder content: () -> Content) {
        self.alignment = alignment
        self.spacing = spacing
        self.content = content()
    }

    var body: some View {
        HStack(alignment: alignment,
               spacing: spacing) {
            content
        }
        .padding(.horizontal)
        .padding(.vertical)
        .background(Color(NSColor.windowBackgroundColor))
        .cornerRadius(8)
    }
}

struct PostDetailView: View {

    @Environment(\.language)
    private var language

    @ObservedObject
    var post: Post

    @State
    private var showPagePicker = false

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

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

    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                Text("Post data")
                    .font(.headline)
                DetailListItem {
                    Text("ID")
                        .foregroundStyle(.primary)
                    TextField("ID", text: $post.id)
                        .multilineTextAlignment(.trailing)
                }
                DetailListItem {
                    Text("Draft")
                    Spacer()
                    Toggle(isOn: $post.isDraft) {
                        Text("")
                    }.toggleStyle(.switch)
                }
                DetailListItem {
                    Text("Start")
                    Spacer()
                    DatePicker("", selection: $post.startDate, displayedComponents: .date)
                        .datePickerStyle(.compact)
                }
                DetailListItem {
                    Text("End")
                    Spacer()
                    Toggle(isOn: $post.hasEndDate) {
                        Text("")
                    }.toggleStyle(.switch)
                    DatePicker("", selection: $post.endDate, displayedComponents: .date)
                        .datePickerStyle(.compact)
                        .disabled(!post.hasEndDate)
                }
                DetailListItem {
                    Text("Linked page")
                    Spacer()
                    Button(action: { showPagePicker = true }) {
                        Text(linkedPageText)
                    }
                    .buttonStyle(.plain)
                    .foregroundStyle(.blue)
                }
                LocalizedPostDetailView(post: post.localized(in: language))

            }
            .padding()
        }
        .sheet(isPresented: $showPagePicker) {
            PagePickerView(
                showPagePicker: $showPagePicker,
                selectedPage: $post.linkedPage)
        }
    }
}

struct LocalizedPostDetailView: View {

    @ObservedObject
    var post: LocalizedPost

    @State
    private var showImagePicker = false

    var body: some View {
        VStack(alignment: .leading) {
            Text("Link Preview")
                .font(.headline)
            DetailListItem {
                Text("Title")
                Spacer()
                OptionalTextField("", text: $post.linkPreviewTitle)
            }
            DetailListItem {
                Text("Image")
                Spacer()
                Button(action: { showImagePicker = true }) {
                    Text(post.linkPreviewImage?.id ?? "Select")
                }
                .buttonStyle(.plain)
                .foregroundStyle(.blue)
            }
            DetailListItem {
                Text("Description")
                Spacer()
                OptionalTextField("", text: $post.linkPreviewDescription)
            }
        }
        .sheet(isPresented: $showImagePicker) {
            ImagePickerView(showImagePicker: $showImagePicker) { image in
                post.linkPreviewImage = image
            }
        }
    }
}

#Preview(traits: .fixedLayout(width: 270, height: 500)) {
    PostDetailView(post: .fullMock)
}