AnnotatedString

AnnotatedString

@Composable
fun AnnotatedString(modifier: Modifier = Modifier) {

    // Define tags for expanded and minified text
    val tagExpanded = "expanded_text"
    val tagMinified = "minified_text"
// Maintain the state of text toggling (expanded or minified)
    val textToggleState = remember { mutableStateOf(Pair(tagMinified, "Read more ...")) }


    val abstractArtText: AnnotatedString = buildAnnotatedString {

        val toggleString = textToggleState.value.second

        // Define the base article snippet with a toggle string
        val snippet = "With Compose, UI elements are described  " +
                "as functions and $toggleString"

        // Find the start and end indices of the toggle string
        val startIndex = snippet.indexOf(toggleString) +276
        val endIndex = startIndex + toggleString.length

        withStyle(
            style = SpanStyle(
                fontSize = 42.sp,
                brush = Brush.horizontalGradient(listOf(Color.Red, Color.Blue, Color.Green))
            )
        ) {
            append("Colorful Compose")
        }
        append("\n\n")
        withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, fontSize = 26.sp)) {
            append("J")
        }
        withStyle(style = SpanStyle(fontWeight = FontWeight.Bold,fontSize = 16.sp)) {
            append("etpack Compose ")
        }
        append("is a ")
        withStyle(
            style = SpanStyle(
                brush = Brush.verticalGradient(
                    listOf(
                        Color.Magenta,
                        Color.Yellow
                    )
                ),
                fontSize = 16.sp
            )
        ) {
            append("modern ")
        }
        append("fully declarative UI toolkit for building native  ")
        withStyle(style = SpanStyle(textDecoration = TextDecoration.LineThrough,fontSize = 16.sp)) {
            append("IOS Apps")
        }
        withStyle(style = SpanStyle(fontWeight = FontWeight.Bold,fontSize = 16.sp)) {
            append(" Android apps. ")
        }
        withStyle(style = SpanStyle(background = Color.Yellow.copy(0.3f),fontSize = 16.sp)) {
            append(" It simplifies UI development by using Kotlin programming language features, allowing developers to define UI components in a more intuitive and concise way. ")
        }

        // Apply styling to the entire snippet (font size and semi-bold)
        withStyle(style = SpanStyle(fontSize = 16.sp)) {
            withStyle(style = SpanStyle(fontWeight = FontWeight.Normal)) {
                append(snippet)
            }
            // If the text is expanded, add more article content
            if(textToggleState.value.first == tagExpanded) {
                withStyle(style = SpanStyle(background = Color.Red.copy(0.3f),fontSize = 16.sp)) {
                    append(
                        "\nUI updates are automatically handled based on state changes. " +
                                "It eliminates the need for XML layouts, reducing boilerplate " +
                                "code and improving maintainability. Compose integrates " +
                                "seamlessly with existing Android apps and supports " +
                                "features like animations, theming, and navigation. It's " +
                                "part of Android’s Jetpack suite, offering a more flexible and " +
                                "efficient approach to UI design. "
                    )
                }
            }
        }
        // Apply styling to the specified range (magenta color and underline)
        addStyle(
            style = SpanStyle(
                color = Color.Magenta,
                textDecoration = TextDecoration.Underline
            ), start = startIndex, end = endIndex
        )

        // Add annotations based on the text state (expanded or minified)
        if(textToggleState.value.first == tagExpanded) {
            addStringAnnotation(
                tagMinified,
                "Read again ...",
                start = startIndex,
                end = endIndex
            )
        } else {
            addStringAnnotation(
                tagExpanded,
                "Show less ...",
                start = startIndex,
                end = endIndex
            )
        }
    }

//    Box(
//        modifier = modifier
//            .fillMaxSize()
//            .padding(15.dp)
//            .padding(top = 15.dp)
//    ) {
       // Text(abstractArtText)
        // Create a clickable text composable to display the article text
        ClickableText(
            modifier = Modifier.padding(16.dp).fillMaxWidth(),
            text = abstractArtText,
            onClick = {
                // Toggle between expanded and minified text based on annotations
                abstractArtText
                    .getStringAnnotations(it, it)
                    .firstOrNull()?.let { annotation ->
                        if(annotation.tag == tagExpanded) {
                            textToggleState.value = Pair(tagExpanded, annotation.item)
                        } else {
                            textToggleState.value = Pair(tagMinified, annotation.item)
                        }
                    }
            }
        )
//    }
}