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
    private var item: Post

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

    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                Text("ID")
                    .font(.headline)
                TextField("", text: $item.id)
                    .textFieldStyle(.roundedBorder)
                    .padding(.bottom)

                HStack {
                    Text("Draft")
                        .font(.headline)
                    Spacer()
                    Toggle("", isOn: $item.isDraft)
                        .toggleStyle(.switch)
                }
                .padding(.bottom)

                HStack {
                    Text("Start")
                        .font(.headline)
                    Spacer()
                    DatePicker("", selection: $item.startDate, displayedComponents: .date)
                        .datePickerStyle(.compact)
                        .padding(.bottom)
                }

                HStack(alignment: .firstTextBaseline) {
                    Text("Has end date")
                        .font(.headline)
                    Spacer()
                    Toggle("", isOn: $item.hasEndDate)
                        .toggleStyle(.switch)
                        .padding(.bottom)
                }

                if item.hasEndDate {
                    HStack(alignment: .firstTextBaseline) {
                        Text("End date")
                            .font(.headline)
                        Spacer()
                        DatePicker("", selection: $item.endDate, displayedComponents: .date)
                            .datePickerStyle(.compact)
                            .padding(.bottom)
                    }
                }

                LocalizedPostDetailView(post: item.localized(in: language))

            }
            .padding()
        }
    }
}

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