Checkbox

import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.style.border
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.styleable
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.composeunstyled.CheckedIndicator
import com.composeunstyled.UnstyledCheckbox

@Preview
@Composable
fun Checkbox() {
    var checked by remember { mutableStateOf(false) }
    val interactionSource = remember { MutableInteractionSource() }
    val styleState = rememberUpdatedStyleState(interactionSource)

    UnstyledCheckbox(
        checked = checked,
        onCheckedChange = { checked = it },
        accessibilityLabel = "Receive updates",
        interactionSource = interactionSource,
        indication = null,
    ) {
        Row(
            horizontalArrangement = Arrangement.spacedBy(10.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            CheckedIndicator(
                enter = fadeIn(),
                exit = fadeOut(),
                modifier = Modifier
                    .size(20.dp)
                    .styleable(styleState) {
                        shape(RoundedCornerShape(5.dp))
                        background(if (checked) Color(0xFF2D79F3) else Color.White)
                        border(
                            1.dp,
                            SolidColor(if (checked) Color(0xFF2D79F3) else Color(0xFFD1D5DB))
                        )
                    },
            ) {
                Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                    Canvas(Modifier.size(14.dp)) {
                        val strokeWidth = 2.dp.toPx()
                        drawLine(
                            color = Color.White,
                            start = Offset(size.width * 0.2f, size.height * 0.52f),
                            end = Offset(size.width * 0.42f, size.height * 0.74f),
                            strokeWidth = strokeWidth,
                            cap = StrokeCap.Round,
                        )
                        drawLine(
                            color = Color.White,
                            start = Offset(size.width * 0.42f, size.height * 0.74f),
                            end = Offset(size.width * 0.8f, size.height * 0.28f),
                            strokeWidth = strokeWidth,
                            cap = StrokeCap.Round,
                        )
                    }
                }
            }
            BasicText("Receive updates")
        }
    }
}