Untitled

@Composable
internal fun VerificationCodeTextField(
    modifier: Modifier = Modifier,
    value: String,
    onValueChange: (String) -> Unit,
    placeholder: String = "",
    errorMessage: String = "",
    focusRequester: FocusRequester = remember { FocusRequester() },
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
) {
    val isError = errorMessage.isNotEmpty()
    Column(modifier = modifier, verticalArrangement = Arrangement.spacedBy(space16)) {
        BasicTextField(
            value = value,
            onValueChange = onValueChange,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier
                .focusRequester(focusRequester),
            interactionSource = interactionSource,
            decorationBox = {
                CodeInputBox(text = value)
            }
        )
        if (isError) {
            NoFontPaddingText(text = errorMessage, style = ConsumerTextStyle.label3Regular.copy(color = SystemSolidDanger200))
        }
    }

}

private const val CODE_LENGTH = 4

private val CODE_FONT_SIZE = 28.sp

@Composable
private fun CodeInputBox(modifier: Modifier = Modifier, text: String = "") {
    Row(modifier = modifier, horizontalArrangement = Arrangement.spacedBy(space16)) {
        for (i in 0 until CODE_LENGTH) {
            val number = text.getOrNull(i)?.toString().safe()
            when {
                number.isNotEmpty() -> Text(
                    modifier = Modifier
                        .size(space32),
                    text = number,
                    style = ConsumerTextStyle.label1Regular.copy(fontSize = CODE_FONT_SIZE),
                    textAlign = TextAlign.Center
                )
                else -> Box(
                    modifier = Modifier
                        .size(space32),
                    contentAlignment = Alignment.Center
                ) {
                    Box(
                        modifier = Modifier
                            .size(space8)
                            .background(NeutralSolidGray400, shape = CircleShape)
                    )
                }
            }
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
private fun Preview() {
    ConsumerAppTheme {
        val focusRequester: FocusRequester = remember { FocusRequester() }
        LaunchedEffect(Unit) {
            focusRequester.requestFocus()
        }
        var text by remember { mutableStateOf("1234") }
        VerificationCodeTextField(
            modifier = Modifier.padding(space10),
            value = text,
            placeholder = "email@test.com",
            errorMessage = "Test error message",
            onValueChange = { text = it },
            focusRequester = focusRequester
        )
    }
}