import APIClient
import ComponentLibrary
import SwiftUI

struct MiniProfileV2Stack: View {
    public var userProfileURLs: [String?]
    /** The profiles of the users that are mentioned in the notification. */

    var body: some View {
        ZStack {
            if userProfileURLs.count == 1 {
                singleProfile
            } else if userProfileURLs.count == 2 {
                twoStack
            } else if userProfileURLs.count > 2 {
                threeStack
            } else {
                EmptyView()
            }
        }
        .frame(width: 44.0)
    }

    @ViewBuilder
    var singleProfile: some View {
        imageCircle(userProfileURLs[0], size: 40.0)
    }

    @ViewBuilder
    var twoStack: some View {
        let circleSize: CGFloat = 28.0
        let deltaY: CGFloat = 16.0
        imageCircle(userProfileURLs[0], size: circleSize)
            .padding(.bottom, deltaY)
        imageCircle(userProfileURLs[1], size: circleSize)
            .padding(.top, deltaY)
    }

    @ViewBuilder
    var threeStack: some View {
        let circleSize: CGFloat = 28.0
        let deltaY: CGFloat = 20.0
        imageCircle(userProfileURLs[0], size: circleSize)
            .padding(.bottom, deltaY)
        imageCircle(userProfileURLs[1], size: circleSize)
        imageCircle(userProfileURLs[2], size: circleSize)
            .padding(.top, deltaY)
    }

    @ViewBuilder
    func imageCircle(_ url: String?, size: CGFloat) -> some View {
        RemoteImage(url: url, fallbackId: "1")
            .frame(width: size, height: size)
            .clipShape(.rect(cornerRadius: .infinity))
            .overlay {
                Circle()
                    .stroke(Color.SemanticV1.backgroundPrimary, lineWidth: 1.0)
            }
    }
}