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

import SwiftUI

struct IconView: View {
    @State public var iconViewModel: IconViewModel
    
    private let facePercSize = 0.6
    
    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(contentMode: .fill)
                            .foregroundColor(iconViewModel.bgOverlayColor)
                    }
                }
                .scaleEffect(1.1)
                .clipped()
                .background(
                    .clear
                )
                                
                Circle()
                    .strokeBorder(iconViewModel.bgColor, lineWidth: geo.size.width * 0.045)
                    .background(Circle().fill(.clear))
                    .frame(width: geo.size.width*facePercSize,
                           height: geo.size.height*facePercSize,
                           alignment: .center)
                    .alignmentGuide(.top, computeValue: { _ in
                        return geo.size.width/2
                    })
                
                Circle()
                    .fill(iconViewModel.innerColor)
                    .frame(width: geo.size.width*facePercSize,
                           height: geo.size.height*facePercSize,
                           alignment: .center)
                    .alignmentGuide(.top, computeValue: { _ in
                        return geo.size.width/2
                    })
                
                iconViewModel.centerImage
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: geo.size.width*facePercSize,
                           height: geo.size.height*facePercSize,
                           alignment: .center)
                    .foregroundColor(iconViewModel.bgOverlayColor)
                    .alignmentGuide(.top, computeValue: { _ in
                        return geo.size.width/2
                    })

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

struct IconView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            IconView(iconViewModel: IconViewModel.great)
                .frame(width: 256, height: 256, alignment: .center)
            
            IconView(iconViewModel: IconViewModel.good)
                .frame(width: 256, height: 256, alignment: .center)

            IconView(iconViewModel: IconViewModel.average)
                .frame(width: 256, height: 256, alignment: .center)

            IconView(iconViewModel: IconViewModel.bad)
                .frame(width: 256, height: 256, alignment: .center)

            IconView(iconViewModel: IconViewModel.horrible)
                .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)
        }
        
    }
}