session-ios/Session/Conversations/Message Cells/Content Views/ReactionView.swift

import UIKit

public struct ReactionViewModel: Hashable {
    let emoji: EmojiWithSkinTones
    let number: Int
    let showBorder: Bool
    
    init(emoji: EmojiWithSkinTones, value: Int, showBorder: Bool) {
        self.emoji = emoji
        self.number = value
        self.showBorder = showBorder
    }
}

final class ReactionButton: UIView {
    let viewModel: ReactionViewModel
    let showNumber: Bool
    
    // MARK: Settings
    private var height: CGFloat = 22
    private var fontSize: CGFloat = Values.verySmallFontSize
    
    private var spacing: CGFloat = Values.verySmallSpacing
    
    // MARK: Lifecycle
    init(viewModel: ReactionViewModel, showNumber: Bool = true) {
        self.viewModel = viewModel
        self.showNumber = showNumber
        super.init(frame: CGRect.zero)
        setUpViewHierarchy()
    }
    
    override init(frame: CGRect) {
        preconditionFailure("Use init(viewItem:textColor:) instead.")
    }
    
    required init?(coder: NSCoder) {
        preconditionFailure("Use init(viewItem:textColor:) instead.")
    }
    
    private func setUpViewHierarchy() {
        let emojiLabel = UILabel()
        emojiLabel.text = viewModel.emoji.rawValue
        emojiLabel.font = .systemFont(ofSize: fontSize)
        
        let stackView = UIStackView(arrangedSubviews: [ emojiLabel ])
        stackView.axis = .horizontal
        stackView.spacing = spacing
        stackView.alignment = .center
        stackView.layoutMargins = UIEdgeInsets(top: 0, left: Values.smallSpacing, bottom: 0, right: Values.smallSpacing)
        stackView.isLayoutMarginsRelativeArrangement = true
        addSubview(stackView)
        stackView.pin(to: self)
        
        set(.height, to: self.height)
        backgroundColor = Colors.receivedMessageBackground
        layer.cornerRadius = self.height / 2
        
        if viewModel.showBorder {
            self.addBorder(with: Colors.accent)
        }
        
        if showNumber || viewModel.number > 1 {
            let numberLabel = UILabel()
            numberLabel.text = viewModel.number < 1000 ? "\(viewModel.number)" : String(format: "%.1f", Float(viewModel.number) / 1000) + "k"
            numberLabel.font = .systemFont(ofSize: fontSize)
            numberLabel.textColor = Colors.text
            stackView.addArrangedSubview(numberLabel)
        }
    }
}

final class ExpandingReactionButton: UIView {
    private let emojis: [EmojiWithSkinTones]
    
    // MARK: Settings
    private let size: CGFloat = 22
    private let margin: CGFloat = 15
    
    // MARK: Lifecycle
    init(emojis: [EmojiWithSkinTones]) {
        self.emojis = emojis
        super.init(frame: CGRect.zero)
        setUpViewHierarchy()
    }
    
    override init(frame: CGRect) {
        preconditionFailure("Use init(viewItem:textColor:) instead.")
    }
    
    required init?(coder: NSCoder) {
        preconditionFailure("Use init(viewItem:textColor:) instead.")
    }
    
    private func setUpViewHierarchy() {
        var rightMargin: CGFloat = 0
        for emoji in self.emojis.reversed() {
            let container = UIView()
            container.set(.width, to: size)
            container.set(.height, to: size)
            container.backgroundColor = Colors.receivedMessageBackground
            container.layer.cornerRadius = size / 2
            container.layer.borderWidth = 1
            container.layer.borderColor = isDarkMode ? UIColor.black.cgColor : UIColor.white.cgColor
            
            let emojiLabel = UILabel()
            emojiLabel.text = emoji.rawValue
            emojiLabel.font = .systemFont(ofSize: Values.verySmallFontSize)
            
            container.addSubview(emojiLabel)
            emojiLabel.center(in: container)
            
            addSubview(container)
            container.pin([ UIView.VerticalEdge.top, UIView.VerticalEdge.bottom ], to: self)
            container.pin(.right, to: .right, of: self, withInset: -rightMargin)
            rightMargin += margin
        }
        
        set(.width, to: rightMargin - margin + size)
    }
}