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 {

    VStack(spacing: 50) {

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

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

      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)

      HStack {
        Text("Total Mice in Inventory:")
        Text("\(mouseState.total)")
        }
        .font(.headline).padding()
      }.padding()
      .background(Color.blue.opacity(0.5))
//      .cornerRadius(32) // uncomment to destroy interactivity
  }
}

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