package com.pixelized.desktop.lwa.ui.screen.campaign.player.detail.inventory.item

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedContentTransitionScope
import androidx.compose.animation.ContentTransform
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
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.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.pixelized.desktop.lwa.ui.composable.currency.Currency
import com.pixelized.desktop.lwa.ui.composable.currency.CurrencyUio
import com.pixelized.desktop.lwa.ui.theme.lwa

@Stable
data class PurseUio(
    val gold: Int,
    val silver: Int,
    val copper: Int,
)

@Stable
object InventoryPurseDefault {
    @Stable
    val paddings = PaddingValues(horizontal = 0.dp, vertical = 4.dp)
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun InventoryPurse(
    modifier: Modifier = Modifier,
    paddings: PaddingValues = InventoryPurseDefault.paddings,
    purse: PurseUio,
    onPurse: () -> Unit,
) {
    Row(
        modifier = Modifier
            .clip(shape = MaterialTheme.lwa.shapes.item)
            .clickable { onPurse() }
            .padding(paddingValues = paddings)
            .then(other = modifier),
        horizontalArrangement = Arrangement.spacedBy(space = 8.dp),
    ) {
        Row(verticalAlignment = Alignment.Bottom) {
            Currency(
                currency = CurrencyUio.Gold,
            )
            AnimatedContent(
                targetState = purse.gold,
                transitionSpec = coinTransitionSpec(),
            ) {
                Text(
                    style = MaterialTheme.lwa.typography.system.body1,
                    fontWeight = FontWeight.Bold,
                    text = "$it",
                )
            }
        }

        Row(verticalAlignment = Alignment.Bottom) {
            Currency(
                currency = CurrencyUio.Silver,
            )
            AnimatedContent(
                targetState = purse.silver,
                transitionSpec = coinTransitionSpec(),
            ) {
                Text(
                    style = MaterialTheme.lwa.typography.system.body1,
                    fontWeight = FontWeight.Bold,
                    text = "$it",
                )
            }
        }

        Row(verticalAlignment = Alignment.Bottom) {
            Currency(
                currency = CurrencyUio.Copper,
            )
            AnimatedContent(
                targetState = purse.copper,
                transitionSpec = coinTransitionSpec(),
            ) {
                Text(
                    style = MaterialTheme.lwa.typography.system.body1,
                    fontWeight = FontWeight.Bold,
                    text = "$it",
                )
            }
        }
    }
}

@Composable
@Stable
private fun coinTransitionSpec(): AnimatedContentTransitionScope<Int>.() -> ContentTransform = {
    val enter = fadeIn() + slideInHorizontally { -16 }
    val exit = fadeOut() + slideOutHorizontally { 16 }
    enter togetherWith exit using SizeTransform(clip = false)
}