import AnalyticsClient
import APIClient
import AVFoundation
import CommentsClient
import ComponentLibrary
import ComposableArchitecture
import FeatureClipDetail
import Foundation
import Localization
import MediaPlayer
import StatsigClient
import SwiftUI

public struct ExpandedPlayerRemixOfInfo: View {
    let clip: Clip
    let remixOfTapped: (ParentClip) -> Void

    public init(
        clip: Clip,
        remixOfTapped: @escaping (ParentClip) -> Void
    ) {
        self.clip = clip
        self.remixOfTapped = remixOfTapped
    }

    private var parentClip: ParentClip? {
        @Shared(.inMemory(.clipParentMap)) var clipParentMap: [ClipID: ParentClip] = [:]
        guard let parentClip = clipParentMap[clip.id] else {
            return nil
        }
        return parentClip
    }

    private var shouldShowRemixOf: Bool {
        guard let parentClip,
              let displayName = parentClip.userDisplayName,
              clip.isRemix,
              clip.showRemix,
              FeatureFlag.create.remixAndAttribution
        else {
            return false
        }
        return true
    }

    public var body: some View {
        if let parentClip,
           let displayName = parentClip.userDisplayName,
           shouldShowRemixOf
        {
            Button {
                UIImpactFeedbackGenerator(style: .light).impactOccurred()
                remixOfTapped(parentClip)
            } label: {
                HStack(spacing: 4) {
                    Image.Icon.remix
                        .resizable()
                        .frame(width: 12, height: 12)
                        .foregroundStyle(Color.SemanticV1.textPrimary)

                    Text(L10n.FeaturePlayer.remixOf)
                        .typographyV1(.subtitleXsmall)
                        .foregroundStyle(Color.SemanticV1.textPrimary)

                    RemoteImage(url: parentClip.userAvatarImageUrl, fallbackId: displayName)
                        .frame(width: 16, height: 16)
                        .cornerRadius(.infinity)

                    // Need to explicitly size
                    let uiFont = TypographyV1.subtitleXsmall.uiFont ?? .systemFont(ofSize: 13)
                    let uiFontWidth = displayName.boundingBox(with: uiFont).width
                    MarqueeText(
                        text: displayName,
                        font: TypographyV1.subtitleXsmall.uiFont ?? .systemFont(ofSize: 13),
                        leftFade: 0.5,
                        rightFade: 0.5,
                        startDelay: 2,
                        alignment: .leading
                    )
                    .frame(maxWidth: uiFontWidth)
                    .foregroundStyle(Color.SemanticV1.textPrimary)
                }
                .padding(.vertical, 4)
                .padding(.horizontal, 8)
                .background {
                    Capsule()
                        .fill(Material.ultraThinMaterial)
                        .strokeBorder(Color.SemanticV2.backgroundGlassDense, lineWidth: 0.25, antialiased: true)
                }
            }
        }
    }
}