package com.pixelized.desktop.lwa.ui.screen.campaign.player.ribbon.common

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Stable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.FilterQuality
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.DpSize
import com.pixelized.desktop.lwa.ui.composable.image.LwaAsyncImage
import com.pixelized.desktop.lwa.ui.theme.lwa

@Stable
data class CharacterRibbonPortraitUio(
    val portrait: String?,
    val name: String,
    val damagePercent: Float?,
)

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CharacterRibbonPortrait(
    modifier: Modifier = Modifier,
    background: Color = MaterialTheme.lwa.colorScheme.elevated.base1dp,
    overlay: Brush = MaterialTheme.lwa.colorScheme.portraitBackgroundBrush,
    size: DpSize = MaterialTheme.lwa.dimen.portrait.minimized,
    character: CharacterRibbonPortraitUio,
) {
    Box(
        modifier = modifier
            .size(size = size)
            .background(color = background)
            .drawWithContent {
                drawContent()
                drawRect(brush = overlay)
            }
    ) {
        AnimatedContent(
            targetState = character.portrait,
            transitionSpec = { fadeIn() togetherWith fadeOut() },
        ) { portrait ->
            LwaAsyncImage(
                modifier = Modifier.fillMaxSize(),
                model = portrait,
                contentScale = ContentScale.Crop,
                alignment = Alignment.TopCenter,
                filterQuality = FilterQuality.High,
                contentDescription = null,
            )
        }

        character.damagePercent?.let {
            BloodOverlay(
                damagePercent = it,
            )
        }
    }
}