//
//  LiveRoomChatItemView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/14.
//

import SwiftUI
import Kingfisher

struct LiveRoomChatItemView: View {
    
    let chatMessage: LiveRoomNormalChat
    let onClickProfile: () -> Void
    
    var body: some View {
        HStack(alignment: .top, spacing: 13.3) {
            ZStack {
                switch chatMessage.rank + 1 {
                case -2:
                    Color(hex: "4999e3")
                        .frame(width: 33.3, height: 33.3, alignment: .top)
                        .clipShape(Circle())
                    
                case -1:
                    Color.button
                        .frame(width: 33.3, height: 33.3, alignment: .top)
                        .clipShape(Circle())
                    
                case 1:
                    Color(hex: "fdca2f")
                        .frame(width: 33.3, height: 33.3, alignment: .top)
                        .clipShape(Circle())
                    
                case 2:
                    Color(hex: "dcdcdc")
                        .frame(width: 33.3, height: 33.3, alignment: .top)
                        .clipShape(Circle())
                    
                case 3:
                    Color(hex: "c67e4a")
                        .frame(width: 33.3, height: 33.3, alignment: .top)
                        .clipShape(Circle())
                    
                default:
                    Color(hex: "bbbbbb")
                        .frame(width: 33.3, height: 33.3, alignment: .top)
                        .clipShape(Circle())
                }
                
                KFImage(URL(string: chatMessage.profileUrl))
                    .resizable()
                    .scaledToFill()
                    .frame(width: 30, height: 30, alignment: .top)
                    .clipShape(Circle())
                
                VStack(alignment: .trailing, spacing: 0) {
                    Spacer()
                    
                    switch chatMessage.rank + 1 {
                    case -2:
                        Image("ic_badge_manager")
                            .resizable()
                            .frame(width: 16.7, height: 16.7)
                        
                    case -1:
                        Image("ic_crown")
                            .resizable()
                            .frame(width: 16.7, height: 16.7)
                        
                    case 1:
                        Image("ic_crown_1")
                            .resizable()
                            .frame(width: 16.7, height: 16.7)
                        
                    case 2:
                        Image("ic_crown_2")
                            .resizable()
                            .frame(width: 16.7, height: 16.7)
                        
                    case 3:
                        Image("ic_crown_3")
                            .resizable()
                            .frame(width: 16.7, height: 16.7)
                        
                    default:
                        EmptyView()
                    }
                }
                .frame(width: 33.3, height: 33.3, alignment: .trailing)
            }
            .onTapGesture { onClickProfile() }
            
            VStack(alignment: .leading, spacing: 6.7) {
                HStack(spacing: 5) {
                    if chatMessage.rank == -3 {
                        Text("스탭")
                            .font(.system(size: 10))
                            .foregroundColor(.white)
                            .padding(2)
                            .background(Color(hex: "4999e3"))
                            .cornerRadius(2)
                    }
                    
                    Text(chatMessage.nickname)
                        .font(.system(size: 12, weight: .light))
                        .foregroundColor(.white)
                }
                
                Text(chatMessage.chat)
                    .font(.system(size: 15))
                    .foregroundColor(.white)
                    .multilineTextAlignment(.leading)
                    .lineLimit(nil)
                    .lineSpacing(6)
                    .fixedSize(horizontal: false, vertical: true)
            }
            .padding(.horizontal, 8)
            .padding(.vertical, 5.3)
            .background(
                UserDefaults.int(forKey: .userId) == chatMessage.userId ?
                Color.button.opacity(0.5) :
                    Color.black.opacity(0.6)
            )
            .cornerRadius(3.3)
        }
        .frame(width: screenSize().width - 86, alignment: .leading)
        .padding(.leading, 20)
    }
}