package com.pixelized.headache.ui.page.event.edit

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.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Remove
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.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.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.pixelized.headache.ui.theme.HeadacheTheme
import com.pixelized.headache.ui.theme.color.HeadacheColorPalette

@Stable
data class EventPillEditUio(
    val id: Long,
    val color: Color,
    val label: String,
    val amount: Int,
)

@Stable
data object EventPillEditDefault {
    @Stable
    val padding: PaddingValues = PaddingValues(horizontal = 0.dp, vertical = 0.dp)

    @Stable
    val spacing: Dp = 4.dp

    @Stable
    val minAmountWidth: Dp = 32.dp

    @Stable
    val buttonOutShape: Shape = RoundedCornerShape(
        topStart = 32.dp,
        bottomStart = 32.dp,
        topEnd = 4.dp,
        bottomEnd = 4.dp
    )

    @Stable
    val buttonInShape: Shape = RoundedCornerShape(
        topEnd = 32.dp,
        bottomEnd = 32.dp,
        topStart = 4.dp,
        bottomStart = 4.dp
    )
}

@Composable
fun EventPillEdit(
    modifier: Modifier = Modifier,
    padding: PaddingValues = EventPillEditDefault.padding,
    spacing: Dp = EventPillEditDefault.spacing,
    minAmountWidth: Dp = EventPillEditDefault.minAmountWidth,
    buttonOutShape: Shape = EventPillEditDefault.buttonOutShape,
    buttonInShape: Shape = EventPillEditDefault.buttonInShape,
    item: EventPillEditUio,
    onAdd: (EventPillEditUio) -> Unit,
    onRemove: (EventPillEditUio) -> Unit,
) {
    Row(
        modifier = Modifier
            .padding(paddingValues = padding)
            .then(other = modifier),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(space = spacing),
    ) {
        Text(
            style = MaterialTheme.typography.bodyMedium,
            text = "-",
        )

        Box(
            modifier = Modifier
                .align(alignment = Alignment.CenterVertically)
                .size(12.dp)
                .background(color = item.color)
        )

        Text(
            modifier = Modifier.weight(weight = 1f),
            style = MaterialTheme.typography.titleMedium,
            text = item.label
        )

        IconButton(
            onClick = { onRemove(item) },
            colors = IconButtonDefaults.iconButtonColors(
                contentColor = MaterialTheme.colorScheme.onPrimary,
                containerColor = MaterialTheme.colorScheme.primary,
            ),
            shape = buttonOutShape,
        ) {
            Icon(
                imageVector = Icons.Default.Remove,
                contentDescription = null,
            )
        }

        AnimatedContent(
            targetState = item.amount,
            transitionSpec = {
                val direction = if (targetState < initialState) -1 else 1
                val enter = fadeIn() + slideInVertically { -direction * it }
                val exit = fadeOut() + slideOutVertically { direction * it }
                enter togetherWith exit using SizeTransform(clip = false)
            },
        ) {
            Text(
                modifier = Modifier.widthIn(min = minAmountWidth),
                style = MaterialTheme.typography.titleMedium,
                textAlign = TextAlign.Center,
                text = "$it",
            )
        }

        IconButton(
            onClick = { onAdd(item) },
            colors = IconButtonDefaults.iconButtonColors(
                contentColor = MaterialTheme.colorScheme.onPrimary,
                containerColor = MaterialTheme.colorScheme.primary,
            ),
            shape = buttonInShape,
        ) {
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = null,
            )
        }
    }
}

@Composable
@Preview
private fun EventPillEditPreview() {
    HeadacheTheme {
        Surface {
            EventPillEdit(
                item = EventPillEditUio(
                    id = 0,
                    color = HeadacheColorPalette.Pill.Eletriptan40,
                    label = "Élétriptan 40",
                    amount = 2,
                ),
                onAdd = { },
                onRemove = { },
            )
        }
    }
}