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

import SwiftUI

struct PaletteChooser: View {
    var emojiFontSize: CGFloat = const.defaultEmojiFontSize
    var emojiFont: Font { .system(size: emojiFontSize) }

    @EnvironmentObject var store: PaletteStore
    @State private var chosenPaletteIndex = 0

    var body: some View {
        HStack {
            paletteButton
            body(for: store.palette(at: chosenPaletteIndex)
            )
        }.clipped()
    }

    var paletteButton: some View {
        Button {
            withAnimation {
                chosenPaletteIndex = (chosenPaletteIndex + 1) % store.palettes.count
            }
        } label: {
            Image(systemName: "paintpalette")
        }
        .font(emojiFont)
        .contextMenu { contextMenu }
    }

    @ViewBuilder
    var contextMenu: some View {
        AnimatedActionButton(title: "Edit", systemImage: "pencil") {
            editing = true
        }
        AnimatedActionButton(title: "New", systemImage: "plus") {
            store.insertPalette(named: "New", emojis: "", at: chosenPaletteIndex)
            editing = true
        }
        AnimatedActionButton(title: "Delete", systemImage: "minus.circle") {
            chosenPaletteIndex = store.removePalette(at: chosenPaletteIndex)
        }
        AnimatedActionButton(title: "Manager", systemImage: "slider.vertical.3") {
            managing = true
        }
        gotoMenu
    }

    var gotoMenu: some View {
        Menu {
            ForEach(store.palettes) {
                palette in AnimatedActionButton(title: palette.name) {
                    if let index = store.palettes.index(matching: palette) {
                        chosenPaletteIndex = index
                    }
                }
            }
        } label: {
            Label("Go To", systemImage: "text.insert")
        }
    }

    func body(for palette: Palette) -> some View {
        HStack {
            Text(palette.name)
            SrcollingEmojiView(emojis: palette.emojis)
                .font(emojiFont)
        }
        .id(palette.id)
        .transition(rollTransaction)
        .popover(isPresented: $editing) {
            PaletteEditor(palette: $store.palettes[chosenPaletteIndex])
        }
        .sheet(isPresented: $managing) {
            PaletteManager()
        }
    }

    @State private var editing = false
    @State private var managing = false

    var rollTransaction: AnyTransition {
        AnyTransition.asymmetric(insertion: .offset(x: 0, y: emojiFontSize), removal: .offset(x: 0, y: -emojiFontSize))
    }
}

struct SrcollingEmojiView: View {
    let emojis: String
    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                ForEach(emojis.map { String($0) }, id: \.self) { emoji in
                    Text(emoji)
                        .onDrag { NSItemProvider(object: emoji as NSString) }
                }
            }
        }
    }
}

struct PaletteChooser_Previews: PreviewProvider {
    static var previews: some View {
        PaletteChooser()
    }
}