import PlaygroundSupport
import SwiftUI

struct MouseState {
  var corded = 0
  var cordless = 0
  var magic = 0
  var total: Int {
    return corded + cordless + magic
  }
}

struct LiveView: View {
  @State var mouseState = MouseState()
  var body: some View {

    ZStack {

      Rectangle()
        .foregroundColor(Color.white)

      VStack(spacing: 50) {

        HStack {
          Image(systemName: "desktopcomputer")
            .padding()
            .background(Color.white)
            .mask(Circle())

          Text("Mouse Stocks")
            .font(.largeTitle)
            .color(Color.white)
          }.padding() // HStack

        VStack(spacing: 0) {
          Stepper(value: $mouseState.corded,
                  in: 0 ... .max,
                  step: 1,
                  label: { return Text("Corded (\(mouseState.corded))").font(.body) })

          Stepper(value: $mouseState.cordless,
                  in: 0 ... .max,
                  step: 1,
                  label: { return Text("Cordless (\(mouseState.cordless))").font(.body) })

          Stepper(value: $mouseState.magic,
                  in: 0 ... .max,
                  step: 1,
                  label: { return Text("Magic (\(mouseState.magic))").font(.body) })
          }
          .padding()
          .background(Color.white.cornerRadius(8)) // VStack

        HStack {
          Text("Total Mice in Inventory:")
          Text("\(mouseState.total)")
          }
          .font(.headline).padding() // HStack
        }
        .padding()
        .background(Color.blue.opacity(0.5).cornerRadius(16)) // VStack

      }.background(Color.white) // ZStack
  }
}

PlaygroundPage.current.liveView = UIHostingController(rootView: LiveView())