Reflect/Shared/Views/CustomizeView/SubViews/TintPickerView.swift

//
//  TintPickerView.swift
//  Feels (iOS)
//
//  Created by Trey Tartt on 4/2/22.
//

import SwiftUI

struct TintPickerView: View {
    @AppStorage(UserDefaultsStore.Keys.theme.rawValue, store: GroupUserDefaults.groupDefaults) private var theme: Theme = .system
    @AppStorage(UserDefaultsStore.Keys.customMoodTintUpdateNumber.rawValue, store: GroupUserDefaults.groupDefaults) private var customMoodTintUpdateNumber: Int = 0
    @AppStorage(UserDefaultsStore.Keys.moodTint.rawValue, store: GroupUserDefaults.groupDefaults) private var moodTint: MoodTints = .Default
    @StateObject private var customMoodTint = UserDefaultsStore.getCustomMoodTint()

    var body: some View {
        ZStack {
            theme.currentTheme.secondaryBGColor
            VStack {
                ForEach(MoodTints.defaultOptions, id: \.rawValue) { tint in
                    HStack {
                        ForEach(Mood.allValues, id: \.self) { mood in
                            Circle()
                                .frame(width: 35, height: 35)
                                .foregroundColor(
                                    tint.color(forMood: mood)
                                )
                        }
                        .frame(minWidth: 0, maxWidth: .infinity)
                    }
                    .contentShape(Rectangle())
                    .background(
                        RoundedRectangle(cornerRadius: 10, style: .continuous)
                            .fill(moodTint == tint ? theme.currentTheme.bgColor : .clear)
                            .padding([.top, .bottom], -3)
                        
                    )
                    .onTapGesture {
                        let impactMed = UIImpactFeedbackGenerator(style: .heavy)
                        impactMed.impactOccurred()
                        moodTint = tint
                        EventLogger.log(event: "change_mood_tint_id", withData: ["id": tint.rawValue])
                    }
                    Divider()
                }
                
                ZStack {
                    Color.clear
                    
                    Rectangle()
                        .frame(height: 35)
                        .frame(minWidth: 0, maxWidth: .infinity)
                        .foregroundColor(.clear)
                        .contentShape(Rectangle())
                        .onTapGesture {
                            moodTint = .Custom
                            let impactMed = UIImpactFeedbackGenerator(style: .heavy)
                            impactMed.impactOccurred()
                        }
                    
                    HStack {
                        ColorPicker("", selection: $customMoodTint.colorOne)
                            .onChange(of: customMoodTint.colorOne) {
                                saveCustomMoodTint()
                            }
                            .labelsHidden()
                            .frame(minWidth: 0, maxWidth: .infinity)

                        ColorPicker("", selection: $customMoodTint.colorTwo)
                            .labelsHidden()
                            .frame(minWidth: 0, maxWidth: .infinity)
                            .onChange(of: customMoodTint.colorTwo) {
                                saveCustomMoodTint()
                            }

                        ColorPicker("", selection: $customMoodTint.colorThree)
                            .labelsHidden()
                            .frame(minWidth: 0, maxWidth: .infinity)
                            .onChange(of: customMoodTint.colorThree) {
                                saveCustomMoodTint()
                            }

                        ColorPicker("", selection: $customMoodTint.colorFour)
                            .labelsHidden()
                            .frame(minWidth: 0, maxWidth: .infinity)
                            .onChange(of: customMoodTint.colorFour) {
                                saveCustomMoodTint()
                            }

                        ColorPicker("", selection: $customMoodTint.colorFive)
                            .labelsHidden()
                            .frame(minWidth: 0, maxWidth: .infinity)
                            .onChange(of: customMoodTint.colorFive) {
                                saveCustomMoodTint()
                            }
                    }
                    .background(
                        Color.clear
                    )
                }
                .background(
                    RoundedRectangle(cornerRadius: 10, style: .continuous)
                        .fill(moodTint == .Custom ? theme.currentTheme.bgColor : .clear)
                        .padding([.top, .bottom], -3)
                )
            }
            .padding()
        }
        .fixedSize(horizontal: false, vertical: true)
        .cornerRadius(Constants.viewsCornerRaidus, corners: [.topLeft, .topRight, .bottomLeft, .bottomRight])
    }
    
    private func saveCustomMoodTint() {
        UserDefaultsStore.saveCustomMoodTint(customTint: customMoodTint)
        moodTint = .Custom
        EventLogger.log(event: "change_mood_tint_id", withData: ["id": MoodTints.Custom.rawValue])
        customMoodTintUpdateNumber += 1
    }
}

struct TintPickerView_Previews: PreviewProvider {
    static var previews: some View {
        TintPickerView()
    }
}