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

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.clickable
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
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.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.pixelized.desktop.lwa.ui.composable.decoratedBox.DecoratedBox
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

@Stable
data class LevelUpCharacteristicUio(
    val characteristicId: String,
    val value: Int,
    val label: String,
    val selected: Boolean,
    val tooltips: BasicTooltipUio,
)

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LevelUpCharacteristic(
    modifier: Modifier = Modifier,
    paddingValues: PaddingValues = PaddingValues(all = 8.dp),
    characteristic: LevelUpCharacteristicUio,
    onClick: () -> Unit,
) {
    BasicTooltipLayout(
        tooltip = characteristic.tooltips,
        content = {
            DecoratedBox(
                modifier = Modifier
                    .clickable(onClick = onClick)
                    .padding(paddingValues = paddingValues)
                    .then(other = modifier),
            ) {
                Text(
                    modifier = Modifier.align(alignment = Alignment.TopCenter),
                    style = MaterialTheme.typography.caption,
                    overflow = TextOverflow.Ellipsis,
                    maxLines = 1,
                    text = characteristic.label,
                )
                AnimatedContent(
                    modifier = Modifier
                        .fillMaxWidth()
                        .align(alignment = Alignment.Center),
                    targetState = characteristic.selected,
                    transitionSpec = { fadeIn() togetherWith fadeOut() },
                ) {
                    Text(
                        modifier = Modifier.fillMaxWidth(),
                        style = MaterialTheme.typography.h3,
                        textAlign = TextAlign.Center,
                        overflow = TextOverflow.Ellipsis,
                        maxLines = 1,
                        color = when (it) {
                            true -> MaterialTheme.lwa.colorScheme.base.secondary
                            else -> MaterialTheme.lwa.colorScheme.base.primary
                        },
                        text = when (it) {
                            true -> "${characteristic.value + 1}"
                            else -> "${characteristic.value}"
                        }
                    )
                }
            }
        },
    )
}