Reflect/Shared/views/CreateIconView.swift

//
//  CreateIconView.swift
//  Feels (iOS)
//
//  Created by Trey Tartt on 2/13/22.
//

import SwiftUI

struct CreateIconView: View {
    @AppStorage(UserDefaultsStore.Keys.customIcon.rawValue, store: GroupUserDefaults.groupDefaults) private var savedCustomIcon = Data()
    
    @AppStorage(UserDefaultsStore.Keys.theme.rawValue, store: GroupUserDefaults.groupDefaults) private var theme: Theme = .system
    
    static var iconViewBGs: [(Image, UUID)] = {
        var blah = [(Image, UUID)]()
        for _ in 0...99 {
            let image = Image(BackGroundOptions.selectable.randomElement()!.rawValue, bundle: .main)
            blah.append((image, UUID()))
        }
        return blah
    }()
    
    @State private var mouth: Image = MouthOptions.defaultOption
    @StateObject private var customIcon = CustomIcon(leftEye: EyeOptions.defaultOption,
                                                     rightEye: EyeOptions.defaultOption,
                                                     mouth: MouthOptions.defaultOption,
                                                     background: CreateIconView.iconViewBGs,
                                                     bgColor: .red,
                                                     innerColor: .green,
                                                     bgOverlayColor: .black)
    private var randomElements: [AnyView] = [
        AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
                    .resizable()
                    .frame(width: 20, height: 20)),
        AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
                    .resizable()
                    .frame(width: 20, height: 20)),
        AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
                    .resizable()
                    .frame(width: 20, height: 20)),
        AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
                    .resizable()
                    .frame(width: 20, height: 20))
    ]
    
    func update(eye: Eyes, eyeOption: EyeOptions) {
        let image = Image(eyeOption.rawValue, bundle: .main)
        switch eye {
        case .left:
            customIcon.leftEye = image
        case .right:
            customIcon.rightEye = image
        }
    }
    
    func createRandom() {
        customIcon.bgColor = Color(
            red: .random(in: 0...1),
            green: .random(in: 0...1),
            blue: .random(in: 0...1)
        )
        
        customIcon.innerColor = Color(
            red: .random(in: 0...1),
            green: .random(in: 0...1),
            blue: .random(in: 0...1)
        )
        
        update(eye: .left, eyeOption: EyeOptions.allCases.randomElement()!)
        update(eye: .right, eyeOption: EyeOptions.allCases.randomElement()!)
        update(mouthOption: MouthOptions.allCases.randomElement()!)
        
        update(background: BackGroundOptions.allCases.randomElement()!)
    }
    
    func update(mouthOption: MouthOptions) {
        let image = Image(mouthOption.rawValue, bundle: .main)
        customIcon.mouth = image
    }
    
    func update(background: BackGroundOptions) {
        customIcon.background.removeAll()
        
        if background == .random {
            for _ in 0...CustomIcon.numberOfBGItems {
                let image = Image(BackGroundOptions.selectable.randomElement()!.rawValue, bundle: .main)
                customIcon.background.append((image, UUID()))
            }
            return
        }
        let image = Image(background.rawValue, bundle: .main)
        for _ in 0...CustomIcon.numberOfBGItems {
            customIcon.background.append((image, UUID()))
        }
    }
    
    var mixBG: some View {
        VStack {
            HStack {
                randomElements[0]
                randomElements[1]
            }
            HStack {
                randomElements[2]
                randomElements[3]
            }
        }
    }
    
    var iconView: some View {
        IconView(customIcon: customIcon, isPreview: true)
    }
    
    var body: some View {
        VStack {
            iconView
                .frame(width: 256, height: 256)
                .cornerRadius(10)
                .padding(.top)
            
            Spacer()
            
            VStack {
                ColorPicker("Set the background color", selection: $customIcon.bgColor)
                    .padding([.leading, .trailing])
                ColorPicker("Set the inner color", selection: $customIcon.innerColor)
                    .padding([.leading, .trailing])
            }
            
            ZStack {
                Color(theme.currentTheme.secondaryBGColor)
                HStack {
                    Spacer()
                    Menu("Left Eye") {
                        ForEach(EyeOptions.allCases, id: \.self) { option in
                            Button(action: {
                                update(eye: .left, eyeOption: option)
                            }, label: {
                                Label(option.rawValue, image: option.rawValue)
                            })
                        }
                    }
                    Spacer()
                    Menu("Right Eye") {
                        ForEach(EyeOptions.allCases, id: \.self) { option in
                            Button(action: {
                                update(eye: .right, eyeOption: option)
                            }, label: {
                                Label(option.rawValue, image: option.rawValue)
                            })
                        }
                    }
                    Spacer()
                    Menu("Mouth") {
                        ForEach(MouthOptions.allCases, id: \.self) { option in
                            Button(action: {
                                update(mouthOption: option)
                            }, label: {
                                Label(option.rawValue, image: option.rawValue)
                            })
                        }
                    }
                    Spacer()
                }
            }
            .frame(height: 44)
            .padding(.top, 10)
            
            ZStack {
                Color(theme.currentTheme.secondaryBGColor)
                VStack{
                    Text("Background")
                    
                    HStack {
                        ForEach(BackGroundOptions.selectable, id: \.self) { bg in
                            Image(bg.rawValue, bundle: .main)
                                .resizable()
                                .frame(minWidth: 10, idealWidth: 40, maxWidth: 40,
                                       minHeight: 10, idealHeight: 40, maxHeight: 40,
                                       alignment: .center)
                                .onTapGesture {
                                    update(background: bg)
                                }
                        }
                        mixBG
                            .onTapGesture {
                                update(background: .random)
                            }
                        
                        ColorPicker("", selection: $customIcon.bgOverlayColor)
                    }
                    .padding([.leading, .trailing])
                }
            }
            .frame(height: 88)
            .frame(minWidth: 0, maxWidth: .infinity)
            .padding(.top, 10)
            
            ZStack {
                VStack{
                    Color(theme.currentTheme.secondaryBGColor)
                    Button(action: {
                        createRandom()
                    }, label: {
                        Text("Random")
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(Color(UIColor.white))
                            .frame(minWidth: 0, maxWidth: .infinity)
                    })
                        .frame(height: 44)
                        .background(.blue)
                    
                    Button(action: {
                        let bigIconView = IconView(customIcon: customIcon, isPreview: false)
                            .frame(width: 1024, height: 1024, alignment: .center)
                            .aspectRatio(contentMode: .fit)
                        let icon = bigIconView.snapshot()
                        if let data = icon.pngData() {
                            savedCustomIcon = data
                        }
                    }, label: {
                        Text("Save")
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(Color(UIColor.white))
                            .frame(minWidth: 0, maxWidth: .infinity)
                            .background(.green)
                    })
                        .frame(height: 44)
                }
            }
            .frame(height: 88)
        }
        .background(
            theme.currentTheme.bg
                .edgesIgnoringSafeArea(.all)
        )
    }
}

struct CreateIconView_Previews: PreviewProvider {
    static var previews: some View {
        CreateIconView()
    }
}