//
//  IconView.swift
//  Feels (iOS)
//
//  Created by Trey Tartt on 2/20/22.
//

import SwiftUI

struct IconView: View {
    @State public var iconViewModel: IconViewModel
    
    private let facePercSize = 0.6
    public let isPreview: Bool
    
    private var gridXOffset: CGFloat {
        if isPreview {
            return CGFloat(0)
        }
        return CGFloat(6)
    }
    
    private var gridYOffset: CGFloat {
        if isPreview {
            return CGFloat(0)
        }
        return CGFloat(-8)
    }
    
    private var entireFuckingViewOffset: CGFloat {
        if isPreview {
            return CGFloat(0)
        }
        return CGFloat(25)
    }
    
    let columns = [
        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1)
    ]
    
    var body: some View {
        GeometryReader { geo in
            ZStack {
                Rectangle()
                    .fill(
                        iconViewModel.bgColor
                    )
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                
                LazyVGrid(columns: columns, alignment: .leading, spacing: 0) {
                    ForEach(iconViewModel.background, id: \.self.1) { (bgOption, uuid) in
                        bgOption
                            .resizable()
                            .aspectRatio(1, contentMode: .fill)
                            .foregroundColor(iconViewModel.bgOverlayColor)
                    }
                }
                .scaleEffect(1.1)
                .clipped()
                .background(
                    .clear
                )
                                
                Circle()
                    .strokeBorder(iconViewModel.bgColor, lineWidth: geo.size.width * 0.045)
                    .background(Circle().fill(iconViewModel.bgColor))
                    .frame(width: geo.size.width*facePercSize,
                           height: geo.size.height*facePercSize,
                           alignment: .center)
                    .position(x: geo.size.width/2, y: geo.size.height/2)
                
                iconViewModel.centerImage
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: geo.size.width*facePercSize,
                           height: geo.size.height*facePercSize,
                           alignment: .center)
                    .foregroundColor(iconViewModel.bgOverlayColor)
                    .position(x: geo.size.width/2, y: geo.size.height/2)

            }
            .position(x: geo.size.width/2,
                      y: geo.size.height/2 - entireFuckingViewOffset)
        }
    }
}

struct IconView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            IconView(iconViewModel: IconViewModel.great, isPreview: false)
                .frame(width: 256, height: 256, alignment: .center)
            
//            IconView(iconViewModel: IconViewModel.good, isPreview: true)
//                .frame(width: 256, height: 256, alignment: .center)
//
//            IconView(iconViewModel: IconViewModel.average, isPreview: true)
//                .frame(width: 256, height: 256, alignment: .center)
//
//            IconView(iconViewModel: IconViewModel.bad, isPreview: true)
//                .frame(width: 256, height: 256, alignment: .center)
//
//            IconView(iconViewModel: IconViewModel.horrible, isPreview: true)
//                .frame(width: 256, height: 256, alignment: .center)
//
//            IconView(iconViewModel: IconViewModel(backgroundImage: EmojiMoodImages.icon(forMood: .horrible),
//                                            bgColor: MoodTints.Neon.color(forMood: .horrible),
//                                            bgOverlayColor:  MoodTints.Neon.color(forMood: .horrible),
//                                            centerImage: EmojiMoodImages.icon(forMood: .horrible)),
//                     isPreview: true)
//                .frame(width: 256, height: 256, alignment: .center)
        }
        
    }
}