import SwiftUI

struct Item: Identifiable {
    var id = UUID()
    var label: String
}

struct ContentView: View {
    let timer = Timer.publish(every: 0.3, on: .main, in: .common).autoconnect()
    @State var items: [Item] = []

    var body: some View {
        VStack {
            VStack(alignment: .center) {
                HStack(alignment: .top) {
                    VStack(alignment: .leading) {
                        VStack(alignment: .leading) {
                            Text("Historical System Load")
                                .font(.callout)
                            Divider()
                            Rectangle()
                                .foregroundColor(Color.gray.opacity(0))
                        }

                        ZStack(alignment: .top) {
                            /// Y Axis
                            VStack(alignment: .trailing) {
                                HStack {
                                    Text("100%")
                                        .frame(width: 40)
                                        .font(.system(size: 11))
                                    Rectangle()
                                        .frame(height: 1)
                                        .foregroundColor(Color.gray.opacity(0))
                                }
                                Spacer()
                                HStack {
                                    Text("50%")
                                        .frame(width: 40)
                                        .font(.system(size: 11))
                                    Rectangle()
                                        .frame(height: 1)
                                        .foregroundColor(Color.gray.opacity(0))
                                }
                                Spacer()
                                HStack {
                                    Text("25%")
                                        .frame(width: 40)
                                        .font(.system(size: 11))
                                    Rectangle()
                                        .frame(height: 1)
                                        .foregroundColor(Color.gray.opacity(0))
                                }
                                Spacer()
                                HStack {
                                    Text("0%")
                                        .frame(width: 40)
                                        .font(.system(size: 11))
                                    Rectangle()
                                        .frame(height: 1)
                                        .foregroundColor(Color.gray.opacity(0))
                                }
                                Spacer()
                            }

                            /// X Axis
                            HStack(alignment: .center) {
                                Spacer()
                                BarView(value: 140, label: "8/10")
                                BarView(value: 100, label: "8/11")
                                BarView(value: 190, label: "8/12")
                                BarView(value: 170, label: "8/13")
                                BarView(value: 100, label: "8/14")
                                BarView(value: 40, label: "8/15")
                                BarView(value: 140, label: "8/16")
                            }.padding(.leading, 30)
                        }
                    }

                    /// System Monitor
                    VStack(alignment: .leading) {
                        Text("System Monitor")
                            .font(.callout)
                        Divider()
                        VStack(alignment: .leading){
                            ForEach(items) { item in
                                Text(item.label)
                            }
                        }
                    }.onReceive(timer, perform: { t in
                        /// Produce fake data to simulate system activity
                        if items.count > 13 {
                            items.remove(at: 0)
                        }
                        items.append(Item(label: "\(t.timeIntervalSince1970)"))
                    })
                }
            }

            VStack {
                Rectangle()
                    .frame(height: 10)
                    .foregroundColor(Color.gray.opacity(0))

                ZStack(alignment: .center) {
                    Rectangle()
                        .frame(height: 120)
                        .shadow(radius: 2)

                    VStack(alignment: .center, spacing: 10) {
                        VStack(spacing: 0.0) {
                            HStack {
                                Text("Placeholder Block. Will be Rectangle + ZStack content").foregroundColor(.white)
                            }
                        }
                    }
                }
            }
        }
        .frame(width: 600, height: 400)
        .padding(.horizontal)
        .padding(.vertical, 30)
    }
}

struct BarView: View {
    var value: CGFloat
    var label: String

    var body: some View {
        VStack {
            ZStack(alignment: .bottom) {
                Capsule()
                    .frame(width: 25, height: 200)
                    .foregroundColor(Color.black.opacity(0.1))
                Capsule()
                    .frame(width: 25, height: value)
            }
            Rectangle()
                .frame(height: 1)
                .foregroundColor(Color.gray.opacity(0))
            Text(label)
                .font(.system(size: 11))
        }
        Spacer()
    }
}