package com.aiosman.riderpro.ui.composables

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.res.painterResource
import com.aiosman.riderpro.R
import com.aiosman.riderpro.ui.modifiers.noRippleClickable
import kotlinx.coroutines.launch

@Composable
fun AnimatedLikeIcon(
    modifier: Modifier = Modifier,
    liked: Boolean = false,
    onClick: (() -> Unit)? = null
) {
    val animatableRotation = remember { Animatable(0f) }
    val scope = rememberCoroutineScope()
    suspend fun shake() {
        repeat(2) {
            animatableRotation.animateTo(
                targetValue = 10f,
                animationSpec = tween(100)
            ) {

            }
            animatableRotation.animateTo(
                targetValue = -10f,
                animationSpec = tween(100)
            ) {

            }

        }
        animatableRotation.animateTo(
            targetValue = 0f,
            animationSpec = tween(100)
        )
    }
    Box(contentAlignment = Alignment.Center, modifier = Modifier.noRippleClickable {
        onClick?.invoke()
        // Trigger shake animation
        scope.launch {
            shake()
        }
    }) {
        Image(
            painter = if (!liked) painterResource(id = R.drawable.rider_pro_moment_like) else painterResource(
                id = R.drawable.rider_pro_moment_liked
            ),
            contentDescription = "Like",
            modifier = modifier.graphicsLayer {
                rotationZ = animatableRotation.value
            },
        )
    }
}