package com.aiosman.ravenow.ui.composables

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.aiosman.ravenow.LocalAppTheme
import com.aiosman.ravenow.ui.modifiers.noRippleClickable


@Composable
fun Checkbox(
    size: Int = 24,
    checked: Boolean = false,
    onCheckedChange: (Boolean) -> Unit = {}
) {
    val AppColors = LocalAppTheme.current
    val backgroundColor by animateColorAsState(if (checked) AppColors.checkedBackground else Color.Transparent)
    val borderColor by animateColorAsState(if (checked) Color.Transparent else AppColors.secondaryText)
    val borderWidth by animateDpAsState(if (checked) 0.dp else 2.dp)

    Box(
        modifier = Modifier
            .size(size.dp)
            .noRippleClickable {
                onCheckedChange(!checked)
            }
            .clip(CircleShape)
            .background(color = backgroundColor)
            .border(width = borderWidth, color = borderColor, shape = CircleShape)
            .padding(2.dp)
    ) {
        if (checked) {
            Icon(
                Icons.Default.Check,
                contentDescription = "Checked",
                tint = AppColors.checkedText
            )
        }
    }
}