@OptIn(ExperimentalMaterialApi::class, ExperimentalAnimationApi::class)
@Composable
fun CollapsingTopAppBarStylingScreen() {
    val context = LocalContext.current as ComponentActivity
    val scaffoldState = rememberBackdropScaffoldState(BackdropValue.Revealed)
    var isScrollAtTopYPosition by remember {
        mutableStateOf(false)
    }
    LaunchedEffect(scaffoldState.progress) {
        context.logE(">> --------Start-------")
        context.logE(">> progress --> ${scaffoldState.progress}")
        context.logE(">> --------End-------")
    }
    BackdropScaffold(
        scaffoldState = scaffoldState,
        appBar = {},
        persistentAppBar = false,
        backLayerContent = {
            AnimatedContent(
                targetState = isScrollAtTopYPosition,
            ) {
                Column(
                    modifier = Modifier.padding(
                        top = 20.dp,
                        start = 16.dp,
                        bottom = 24.dp
                    ),
                ) {
                    Icon(
                        imageVector = Icons.Default.ShoppingCart,
                        tint = Color.White,
                        contentDescription = null,
                    )
                    Text(
                        text = "Hello!! How are you?",
                        fontSize = 24.sp,
                        color = Color.White,
                    )
                }
            }
        },
        backLayerBackgroundColor = Color.Green,
        frontLayerBackgroundColor = Color.White,
        frontLayerScrimColor = Color.Transparent,
        frontLayerContent = {
            LazyColumn(
                contentPadding = PaddingValues(horizontal = 24.dp, vertical = 24.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                val list = (0..40).map { it.toString() }
                items(count = list.size) {
                    Text(
                        text = list[it],
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(top = 10.dp),
                        color = Color.Black,
                    )
                }
            }
        }
    )
}