cs193p-emojiart/EmojiArt/PaletteEditor.swift

//
//  PaletteEditor.swift
//  EmojiArt
//
//  Created by ching on 2023/2/25.
//

import SwiftUI

struct PaletteEditor: View {
    @Binding var palette: Palette

    var body: some View {
        Form {
            nameSection
            addEmojiSection
            removeEmojiSection
        }
        .frame(minWidth: const.paletteEditorMinWidth, minHeight: const.paletteEditorMinHeight)
        .navigationTitle("Edit \(palette.name)")
    }

    var nameSection: some View {
        Section(header: Text("Name")) {
            TextField("Name", text: $palette.name)
        }
    }

    @State private var emojiToAdd = ""

    var addEmojiSection: some View {
        Section(header: Text("Add Emoji")) {
            TextField("", text: $emojiToAdd)
                .onChange(of: emojiToAdd) { emojis in
                    addEmojis(emojis)
                }
        }
    }

    func addEmojis(_ emojis: String) {
        palette.emojis = (emojis + palette.emojis)
            .filter { $0.isEmoji }
    }

    var removeEmojiSection: some View {
        Section(header: Text("Remove Emoji")) {
            let emojis = palette.emojis.map { String($0) }
            LazyVGrid(columns: [GridItem(.adaptive(minimum: const.defaultEmojiFontSize))]) {
                ForEach(emojis, id: \.self) { emoji in
                    Text(emoji)
                        .onTapGesture {
                            withAnimation {
                                palette.emojis.removeAll(where: { String($0) == emoji })
                            }
                        }
                }
            }
        }
    }
}

struct PaletteEditor_Previews: PreviewProvider {
    static var previews: some View {
        PaletteEditor(palette: .constant(PaletteStore(named: "Priview").palette(at: 1)))
            .previewLayout(.fixed(width: 350, height: 350))
        PaletteEditor(palette: .constant(PaletteStore(named: "Priview").palette(at: 1)))
            .previewLayout(.fixed(width: 350, height: 650))
    }
}