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

import SwiftUI

struct CustomWidgetView: View {
    @StateObject public var customWidgetModel: CustomWidgetModel
    
    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(
                        customWidgetModel.bgColor
                    )
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                
                LazyVGrid(columns: columns, alignment: .leading, spacing: 0) {
                    ForEach(customWidgetModel.backgroundImages, id: \.self.1) { (bgOption, uuid) in
                        bgOption
                            .resizable()
                            .aspectRatio(1, contentMode: .fill)
                            .foregroundColor(customWidgetModel.bgOverlayColor)
                    }
                }
                .scaleEffect(1.1)
                .clipped()
                .background(
                    .clear
                )
                
                Circle()
                    .strokeBorder(customWidgetModel.circleStrokeColor, lineWidth: geo.size.width * 0.045)
                    .background(Circle().fill(customWidgetModel.innerColor))
                    .frame(width: geo.size.width*facePercSize,
                           height: geo.size.height*facePercSize,
                           alignment: .center)
                    .alignmentGuide(.top, computeValue: { _ in
                        return geo.size.width/2
                    })
                
                customWidgetModel.leftEye.image
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: geo.size.width*0.12,
                           height: geo.size.height*0.12,
                           alignment: .center)
                    .position(x: geo.size.width*0.4,
                              y: geo.size.height*0.45)
                    .foregroundColor(customWidgetModel.leftEyeColor)
                
                customWidgetModel.rightEye.image
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: geo.size.width*0.12,
                           height: geo.size.height*0.12,
                           alignment: .center)
                    .position(x: geo.size.width*0.6,
                              y: geo.size.height*0.45)
                    .foregroundColor(customWidgetModel.rightEyeColor)
                
                customWidgetModel.mouth.image
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: geo.size.width*0.12,
                           height: geo.size.height*0.12,
                           alignment: .center)
                    .position(x: geo.size.width*0.5,
                              y: geo.size.height*0.65)
                    .foregroundColor(customWidgetModel.mouthColor)
            }
            .position(x: geo.size.width/2,
                      y: geo.size.height/2)
        }
    }
}

struct WidgetView_Previews: PreviewProvider {
    static var previews: some View {
        CustomWidgetView(customWidgetModel: CustomWidgetModel.randomWidget)
            .frame(width: 256, height: 256, alignment: .center)
        
    }
}