import ComponentLibrary
import Foundation
import Localization
import StatsigClient
import SwiftUI

struct PlaylistView<TrailingView: View>: View {
    let image: ImageSource
    let name: String
    let playlistId: String
    let clipCount: Int
    let trailingView: TrailingView
    let isLikedPlaylist: Bool

    var body: some View {
        playlistView
    }

    @ViewBuilder
    public var playlistView: some View {
        HStack(spacing: 12) {
            switch image {
            case let .local(image):
                image
                    .background(Color.SemanticV1.backgroundQuaternary)
                    .clipShape(.rect(cornerRadius: 8))
                    .frame(width: 50, height: 50)

            case .remote(let url, let fallbackId):
                RemoteImage(url: url, fallbackId: fallbackId)
                    .clipShape(.rect(cornerRadius: 8))
                    .frame(width: 50, height: 50)

            case .likedPlaylist:
                ImageSource.likedPlaylist.source
                    .background(Color.SemanticV1.backgroundQuaternary)
                    .clipShape(.rect(cornerRadius: 8))
                    .frame(width: 50, height: 50)
            }
            VStack(alignment: .leading, spacing: 4) {
                Text(name)
                    .typographyV1(.caption.kerning(0.28))
                    .foregroundStyle(isLikedPlaylist ? Color.SemanticV2.accentPink : Color.SemanticV1.textPrimary)
                    .lineLimit(1)

                if !isLikedPlaylist {
                    Text(clipCount == 1 ? L10n.FeatureClipDetail.song(clipCount) : L10n.FeatureClipDetail.songs(clipCount))
                        .typographyV1(.bodySmall)
                        .foregroundStyle(Color.SemanticV2.foregroundInactive)
                        .lineLimit(1)
                        .contentTransition(.numericText())
                        .animation(.easeInOut, value: clipCount)
                }
            }

            Spacer()

            trailingView
        }
        .contentShape(.rect)
        .padding(.vertical, 4)
    }
}