import SwiftUI

import Introspect
// TODO: install `SwiftUI-Introspect` package from https://github.com/siteline/SwiftUI-Introspect

// --------------------------------------------------------------------------------
// EditMembersViewController
// --------------------------------------------------------------------------------
struct EditMembersView: View {
    @State private var items = ["1", "2"]
    @State private var selectedItem: String?
    // TODO: Replace the `minimumValue` below from the conversion result of UICollectionViewCell xib
    let gridLayout = [GridItem(.adaptive(minimum: 150), spacing: 8)]
    @State private var collectionViewItems = ["1", "2"]

    var body: some View {
        NavigationView {
            ZStack(alignment: .topLeading) {
                GeometryReader { geometry in
                    ScrollView {
                        ZStack(alignment: .topLeading) {
                            GeometryReader { geometry in
                                Text("GROUP MEMBERS")
                                    .frame(dynamicWidth: 414, dynamicHeight: 40, alignment: .leading)
                                    .font(.custom(".AppleSystemUIFont", size: 13))
                                    .background(Color(.groupTableViewBackground))

                                ScrollView(.vertical) {
                                    LazyVGrid(columns: gridLayout, spacing: 8) {
                                        ForEach(items, id: \.self) { item in
                                            // No UICollectionViewCell cell found in the storyboard
                                            // If you have added the UICollectionViewCell through a `xib`, please convert the `xib` and use the result here.
                                        }
                                    }
                                }
                                .frame(dynamicWidth: 398, dynamicHeight: 92)
                                .background(Color.red)
                                .clipped()
                                .offset(dynamicX: 8, dynamicY: 40)

                                Text("ALL USERS")
                                    .frame(dynamicWidth: 414, dynamicHeight: 40, alignment: .leading)
                                    .font(.custom(".AppleSystemUIFont", size: 13))
                                    .background(Color(.groupTableViewBackground))
                                    .offset(dynamicX: 0, dynamicY: 132)

                                List {
                                    Section(footer: EditMembersViewControllerListFooterView()) {
                                        ForEach(items, id: \.self) { item in
                                            CustomTableViewCell()
                                                .listRowInsets(EdgeInsets())
                                                .contentShape(Rectangle())
                                        }
                                    }
                                }
                                .introspectTableView(customize: { tableView in
                                    tableView.alwaysBounceHorizontal = true
                                    tableView.alwaysBounceVertical = true
                                    tableView.clipsToBounds = true
                                })
                                .frame(dynamicWidth: 414, dynamicHeight: 488)
                                .listStyle(.plain)
                                .offset(dynamicX: 0, dynamicY: 172)
                            }
                        }
                        .frame(dynamicWidth: 414, dynamicHeight: 660)
                    }
                    .clipped()
                    .frame(dynamicWidth: 414, dynamicHeight: 660)
//                    .offset(dynamicX: 0, dynamicY: 56)
                }
            }
//            .frame(dynamicWidth: 414, dynamicHeight: 716)
//            .edgesIgnoringSafeArea(.all)
            .navigationTitle("Edit Members")
            .navigationBarTitleDisplayMode(.automatic)
            .navigationBarItems(leading: Button(action: {}) {
                Text("Cancel")
            },
            trailing: Button(action: {}) {
                Text("Save")
            })
        }
    }
}

struct EditMembersView_Previews: PreviewProvider {
    static var previews: some View {
        EditMembersView()
            .previewDevice(PreviewDevice(rawValue: "iPhone 8 Plus"))
            .previewInterfaceOrientation(.portrait)
            .preferredColorScheme(.light)
    }
}

// --------------------------------------------------------------------------------
// EditMembersViewControllerListFooterView
// --------------------------------------------------------------------------------
struct EditMembersViewControllerListFooterView: View {
    var body: some View {
        ZStack(content: {})
            .frame(dynamicWidth: 414, dynamicHeight: 100)
            .listRowInsets(EdgeInsets())
            .background(Color.blue)
    }
}

// --------------------------------------------------------------------------------
// Dynamic Size Helper
// --------------------------------------------------------------------------------
struct DynamicSize {
    static private let baseViewWidth: CGFloat = 414.0
    static private let baseViewHeight: CGFloat = 716.0

    static func getHeight(_ height: CGFloat) -> CGFloat {
        return (height / baseViewHeight) * UIScreen.main.bounds.height
    }

    static func getWidth(_ width: CGFloat) -> CGFloat {
        return (width / baseViewWidth) * UIScreen.main.bounds.width
    }

    static func getOffsetX(_ x: CGFloat) -> CGFloat {
        return (x / baseViewWidth) * UIScreen.main.bounds.width
    }

    static func getOffsetY(_ y: CGFloat) -> CGFloat {
        return (y / baseViewHeight) * UIScreen.main.bounds.height
    }
}

// --------------------------------------------------------------------------------
// Frame and Offset Helper
// --------------------------------------------------------------------------------
extension View {
    func frame(dynamicWidth: CGFloat? = nil, dynamicHeight: CGFloat? = nil, alignment: Alignment = .center) -> some View {
        frame(
            width: DynamicSize.getWidth(dynamicWidth ?? 0),
            height: DynamicSize.getHeight(dynamicHeight ?? 0),
            alignment: alignment)
    }

    func offset(dynamicX: CGFloat = 0, dynamicY: CGFloat = 0) -> some View {
        offset(x: DynamicSize.getOffsetX(dynamicX), y: DynamicSize.getOffsetY(dynamicY))
    }
}

// --------------------------------------------------------------------------------
// CustomTableViewCell
// --------------------------------------------------------------------------------
struct CustomTableViewCell: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            GeometryReader { geometry in
                Text("Test")
                    .frame(dynamicWidth: 374, dynamicHeight: 360, alignment: .center)
                    .font(.system(size: 52, weight: .regular))
                    .multilineTextAlignment(.center)
                    .foregroundColor(Color(white: 1.0))
                    .background(Color(red: 0.7176471, green: 0.60784316, blue: 0.49411765))
                    .offset(dynamicX: 20, dynamicY: 20)
            }
        }
        .frame(dynamicWidth: 414, dynamicHeight: 400)
        .background(Color(.systemPink))
    }
}