Converter

struct ConverterView: View {
  
  private var units = ["J", "MeV", "kWh", "kpm", "kcal", "erg"]
  @State var input: String = "Input"
  @State var output: String = "Result"
  @State private var selectedInputIndex = 0
  @State private var selectedOutputIndex = 0

  var body: some View {
    VStack {
      GeometryReader { geometry in
        VStack(spacing: 0) {
          ValueUnit(input: $input, geometry: geometry, selectedIndex: $selectedInputIndex, units: units)
          
          ValueUnit(input: $output, geometry: geometry, selectedIndex: $selectedOutputIndex, units: units)
          
        }
      }
      .padding()
      VStack {
        HStack(spacing: 0) {
          Button("to calc", action: {  })
            .frame(maxWidth: .infinity,
                   maxHeight: .infinity)
          Button("clear", action: { input = "" })
            .frame(maxWidth: .infinity,
                   maxHeight: .infinity)
        }
        HStack(spacing: 0) {
          CalcButton(value: "7", input: $input)
          CalcButton(value: "8", input: $input)
          CalcButton(value: "9", input: $input)
          Button(action: { input.removeLast() }, label: {
            Image(systemName: "delete.left")
          })
          .frame(maxWidth: .infinity,
                 maxHeight: .infinity)
        }
        HStack {
          CalcButton(value: "4", input: $input)
          CalcButton(value: "5", input: $input)
          CalcButton(value: "6", input: $input)
          Button(action: {
            if input.first == "-" {
              input.removeFirst()
            } else {
              input.insert("-", at: String.Index(utf16Offset: 0, in: input))
            }
          }, label: {
            Image(systemName: "plus.slash.minus")
          })
          .frame(maxWidth: .infinity,
                 maxHeight: .infinity)
        }
        HStack {
          CalcButton(value: "1", input: $input)
          CalcButton(value: "2", input: $input)
          CalcButton(value: "3", input: $input)
          Button("e", action: {
            if false == input.contains("e") {
              input.append("e")
            }
          })
          .frame(maxWidth: .infinity,
                 maxHeight: .infinity)
        }
        GeometryReader { geometry in
          HStack {
            Button("0", action: {
              if false == input.isEmpty {
                input.append("0")
              }
            })
            .frame(width: geometry.size.width * 3 / 4 ,
                   height: geometry.size.height)
            Button(".", action: {
              if false == input.contains(".") {
                input.append(".")
              }
            })
          }
        }
      }
      .buttonStyle(CalcButtonStyle())
    }
  }
}