//
//  SettingsView.swift
//  Accent Pomodoro
//
//  Created by Luke Jenquin on 11/21/21.
//

import Foundation
import SwiftUI

struct SettingsView: View {
    @ObservedObject var userSelections: userSelectionsModel
    
    var body: some View {
        Text("Thank you for using Accent Pomodoro!").bold().font(.largeTitle)
            .padding()
        Text("Please select the desired durations and accent colors below:").font(.largeTitle)
        HStack{
            VStack{
                Text("Focus Appearance:")
                TextField("Focus Length", value: $userSelections.focusTime, formatter: NumberFormatter())
                Picker(selection: $userSelections.focusDarkMode, label: Text("")) {
                    Text("Light Mode").tag(1)
                    Text("Dark Mode").tag(2)
                }
                Picker(selection: $userSelections.focusSelected, label: Text("")) {
                    Text("Multicolor").tag(1)
                    Text("Blue").tag(2)
                    Text("Purple").tag(3)
                    Text("Pink").tag(4)
                    Text("Red").tag(5)
                    Text("Orange").tag(6)
                    Text("Yellow").tag(7)
                    Text("Green").tag(8)
                    Text("Graphite").tag(9)
                }
                .pickerStyle(.radioGroup).padding()
                Toggle("Change MenuBar color", isOn: $userSelections.changeFocusMenuBar)
                    .toggleStyle(.checkbox)
                if (userSelections.changeFocusMenuBar){
                    ColorPicker("MenuBar color", selection: $userSelections.focusColor)
                }
            }.padding()
            VStack{
                Text("Relaxation Appearance:")
                TextField("Relax Length", value: $userSelections.relaxTime, formatter: NumberFormatter())
                Picker(selection: $userSelections.relaxDarkMode, label: Text("")) {
                    Text("Light Mode").tag(1)
                    Text("Dark Mode").tag(2)
                }
                Picker(selection: $userSelections.relaxSelected, label: Text("")) {
                    Text("Multicolor").tag(1)
                    Text("Blue").tag(2)
                    Text("Purple").tag(3)
                    Text("Pink").tag(4)
                    Text("Red").tag(5)
                    Text("Orange").tag(6)
                    Text("Yellow").tag(7)
                    Text("Green").tag(8)
                    Text("Graphite").tag(9)
                }
                .pickerStyle(.radioGroup).padding()
                Toggle("Change MenuBar color", isOn: $userSelections.changeRelaxMenuBar)
                    .toggleStyle(.checkbox)
                if (userSelections.changeRelaxMenuBar){
                    ColorPicker("MenuBar color", selection: $userSelections.relaxColor)
                }
            }.padding()
        }.padding()
    }
}