import SwiftUI
import CloudStorage

struct OutputSettings: View {
  
  @CloudStorage("outputFormats") var outputFormats: OutputFormatSetting = .all
  @CloudStorage("frameRate") var frameRate = 10.0
  
  private var anyState: String { "\(outputFormats), \(frameRate)" }
  
  var body: some View {
    Form {
      VStack (alignment: .center) {
        LabeledContent("GIF Framerate") {
          Slider(value: $frameRate,  in: 4...10, step: 1) {
            Text("\(Int(frameRate))").font(.body).frame(width: 24)
          } minimumValueLabel: {
            Text("4")
          } maximumValueLabel: {
            Text("10")
          }
        }.font(.headline)
        Picker(selection: $outputFormats, label: Text("Output Formats").font(.headline)) {
          Text("GIF & MP4")
            .tag(OutputFormatSetting.all)
            .padding(.horizontal, 4.0)
            .padding(.vertical, 2.0)
          Text("Only GIF")
            .tag(OutputFormatSetting.gifOnly)
            .padding(.horizontal, 4.0)
            .padding(.vertical, 2.0)
          
          Text("Only MP4")
            .tag(OutputFormatSetting.mp4Only)
            .padding(.horizontal, 4.0)
            .padding(.vertical, 2.0)
        }.pickerStyle(.radioGroup)
      }
      Spacer()
    }
    .onChange(of: anyState) { _ in
      NotificationCenter.default.post(name: .reloadConfiguration, object: nil, userInfo: nil)
    }
  }
}

#Preview {
  OutputSettings()
}