package com.pixelized.desktop.lwa.ui.screen.levelup.items

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
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.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.pixelized.desktop.lwa.ui.composable.tooltip.BasicTooltipLayout
import com.pixelized.desktop.lwa.ui.composable.tooltip.BasicTooltipUio
import com.pixelized.desktop.lwa.ui.theme.lwa
import lwacharactersheet.composeapp.generated.resources.Res
import lwacharactersheet.composeapp.generated.resources.generic__arrow
import org.jetbrains.compose.resources.DrawableResource
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.resources.stringResource


@Stable
data class LevelUpSubCharacteristicUio(
    val icon: DrawableResource,
    val base: String,
    val levelUp: String,
    val tooltip: BasicTooltipUio,
)

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LevelUpSubCharacteristic(
    modifier: Modifier = Modifier,
    characteristic: LevelUpSubCharacteristicUio?,
) {
    BasicTooltipLayout(
        modifier = modifier,
        tooltip = characteristic?.tooltip,
    ) {
        Row(
            verticalAlignment = Alignment.Bottom,
        ) {
            if (characteristic?.icon != null) {
                Icon(
                    modifier = Modifier
                        .padding(bottom = 4.dp, end = 2.dp)
                        .size(size = MaterialTheme.lwa.dimen.sheet.subCategory),
                    painter = painterResource(characteristic.icon),
                    contentDescription = null
                )
            } else {
                Box(
                    modifier = Modifier
                        .padding(bottom = 4.dp, end = 2.dp)
                        .size(size = MaterialTheme.lwa.dimen.sheet.subCategory),
                )
            }
            Text(
                modifier = Modifier.padding(bottom = 3.dp),
                style = MaterialTheme.typography.caption,
                fontWeight = FontWeight.Thin,
                text = characteristic?.base ?: "",
            )
            Text(
                modifier = Modifier.padding(bottom = 3.dp),
                style = MaterialTheme.typography.caption,
                fontWeight = FontWeight.Thin,
                text = stringResource(Res.string.generic__arrow),
            )
            AnimatedContent(
                targetState = characteristic?.levelUp ?: "",
                transitionSpec = {
                    val enter = fadeIn() + slideInVertically { -16 }
                    val exit = fadeOut() + slideOutVertically { 16 }
                    enter togetherWith exit using SizeTransform(clip = false)
                },
            ) {
                Text(
                    style = MaterialTheme.typography.h6,
                    color = MaterialTheme.lwa.colorScheme.base.secondary,
                    fontWeight = FontWeight.Bold,
                    text = it,
                )
            }
        }
    }
}