MiMO_iOS/MiMoLive/Classes/Live/View/MOPKListView/LineSearch/MOPkTopUsersView.swift

//
//  MOPkTopUsersView.swift
//  MiMoLive
//
//  Created by MiMo on 2025/9/28.
//

import UIKit

/// 头像组排布方向
enum AvatarAlignment {
    case left   // 左边（从右向左排列）
    case right  // 右边（从左向右排列）
}

class MOPkTopUsersView: UIView {
    
    private let maxCount = 3
    
    private var itemViewArray: [MOPkTopUsersItemView] = []

    var alignment: AvatarAlignment = .left
    
    var haveMvp: Bool = false {
        didSet {
            let firstItemView = itemViewArray.first
            firstItemView?.borderImgView.image = UIImage(named: haveMvp ? "icon_pk_mvp" : "icon_pk_top_1")
        }
    }
    
    lazy var stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.spacing = 0
        stackView.alignment = .center
        stackView.axis = .horizontal
        return stackView
    }()
    
    init(alignment: AvatarAlignment) {
        self.alignment = alignment
        super.init(frame: .zero)
        setupViews()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupViews()
    }
    
    private func setupViews() {
        addSubview(stackView)
        stackView.snp.makeConstraints { make in
            make.edges.equalTo(0)
        }
        
        configureDefaultAvatars()
        updateAlignment()
    }
    
    private func updateAlignment() {
        switch alignment {
        case .left:
            stackView.semanticContentAttribute = .forceRightToLeft
        case .right:
            stackView.semanticContentAttribute = .forceLeftToRight
        }
    }
    
    /// 设置默认头像
    func configureDefaultAvatars() {
        stackView.arrangedSubviews.forEach { $0.removeFromSuperview() }
        
        let itemView = MOPkTopUsersItemView()
        if alignment == .left {
            itemView.avatarImgView.image = UIImage(named: "icon_chair_blue")
        } else {
            itemView.avatarImgView.image = UIImage(named: "icon_chair_red")
        }

        itemView.borderImgView.image = UIImage(named: "icon_pk_top_1")
        itemView.borderImgView.isHidden = true
        stackView.addArrangedSubview(itemView)
        itemViewArray.append(itemView)
    }
    
    /// 设置头像数据
    func setupAvatars(with urls: [String]) {
        let placeholder = alignment == .left
            ? UIImage(named: "icon_chair_blue")
            : UIImage(named: "icon_chair_red")
        
        let urls = urls.prefix(3)
        for (i, url) in urls.enumerated() {
            let itemView = if i < itemViewArray.count {
                itemViewArray[i]
            } else {
                MOPkTopUsersItemView()
            }
            if alignment == .left {
                itemView.avatarImgView.image = UIImage(named: "icon_chair_blue")
            } else {
                itemView.avatarImgView.image = UIImage(named: "icon_chair_red")
            }
            
            itemView.borderImgView.image = UIImage(named: "icon_pk_top_\(i + 1)")
            itemView.borderImgView.isHidden = false
            stackView.addArrangedSubview(itemView)
            if !itemViewArray.contains(itemView) {
                itemViewArray.append(itemView)
            }
            itemView.avatarImgView.sd_setImage(with: URL(string: url), placeholderImage: placeholder)
        }
    }
}


//import SwiftUI
//
//struct MOPkTopUsersViewPreview: UIViewRepresentable {
//    func makeUIView(context: Context) -> some UIView {
//        let view = UIView()
//        view.backgroundColor = .white
//
//        let itemView1 = MOPkTopUsersView(alignment: .left)
//        itemView1.haveMvp = true
//        
//        let avatars = ["https://mimo-test.s3.ap-southeast-3.amazonaws.com/av/2025/98/mna/82d793c8fc8d748c7e7b681f98597014.jpg", "https://mimo-test.s3.ap-southeast-3.amazonaws.com/av/2025/98/mna/82d793c8fc8d748c7e7b681f98597014.jpg", "https://mimo-test.s3.ap-southeast-3.amazonaws.com/av/2025/98/mna/82d793c8fc8d748c7e7b681f98597014.jpg", "https://mimo-test.s3.ap-southeast-3.amazonaws.com/av/2025/98/mna/82d793c8fc8d748c7e7b681f98597014.jpg"]
//        itemView1.setupAvatars(with: avatars)
//        
//        view.addSubview(itemView1)
//        itemView1.snp.makeConstraints { make in
//            make.leading.equalTo(5)
//            make.centerY.equalToSuperview()
//        }
//        view.addSubview(itemView1)
//        
//        let itemView2 = MOPkTopUsersView(alignment: .right)
//        view.addSubview(itemView2)
//        itemView2.snp.makeConstraints { make in
//            make.trailing.equalTo(-5)
//            make.centerY.equalToSuperview()
//        }
//        view.addSubview(itemView1)
//
//        return view
//    }
//
//    func updateUIView(_ uiView: UIViewType, context: Context) { }
//}
//
//#Preview {
//    MOPkTopUsersViewPreview()
//}