TransformingLazyColumnFirstLayoutItemProvider

fun interface TransformingLazyColumnFirstLayoutItemProvider

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.util.fastFirstOrNull
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.TransformingLazyColumnFirstLayoutItemProvider
import androidx.wear.compose.foundation.lazy.TransformingLazyColumnFirstLayoutItemProvider.ItemEdge
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material.Text
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.TitleCard
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight

val state = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
var expandedItemIndex by remember { mutableIntStateOf(-1) }

// This sample demonstrates how to use the provider API to control the direction of content
// shifting. By default, TransformingLazyColumn uses the center item as the layout reference.
// This means that if an item above the center expands, it pushes content upwards;
// if below, it pushes downwards.
//
// Here, we fix the Bottom/End edge of the clicked item regardless of its position on screen,
// so that when its animated content appears, the card predictably expands *upwards* every time.
val upwardExpandingItemProvider =
    remember(state) {
        TransformingLazyColumnFirstLayoutItemProvider { centerItem ->
            val item = expandedItemIndex

            // Yield to the standard layout behavior during active scrolls.
            // This avoids custom layout overhead and ensures the [TransformingLazyColumn]
            // tracks the user's scroll gesture using its default center layout reference.
            if (item == -1 || state.isScrollInProgress) {
                return@TransformingLazyColumnFirstLayoutItemProvider centerItem
            }

            // Look up the item's offset from state.layoutInfo (which holds the details
            // from the previous measure pass) to maintain its visual position in the current
            // pass.
            state.layoutInfo.visibleItems
                .fastFirstOrNull { visibleItem -> visibleItem.index == item }
                ?.let { visibleItem ->
                    TransformingLazyColumnFirstLayoutItemProvider.ItemInfo(
                        key = visibleItem.key,
                        index = visibleItem.index,
                        // Pin the bottom edge of the item
                        itemEdge = ItemEdge.End,
                        // Calculate the exact bottom offset from the previous pass
                        offset = visibleItem.offset + visibleItem.transformedHeight,
                    )
                } ?: centerItem
        }
    }

TransformingLazyColumn(
    state = state,
    contentPadding = PaddingValues(horizontal = 20.dp),
    firstLayoutItemProvider = upwardExpandingItemProvider,
) {
    items(count = 10, key = { it }) { cardIndex ->
        val isExpanded = expandedItemIndex == cardIndex
        TitleCard(
            onClick = { expandedItemIndex = cardIndex },
            modifier =
                Modifier.minimumVerticalContentPadding(
                        CardDefaults.minimumVerticalListContentPadding
                    )
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec),
            transformation = SurfaceTransformation(transformationSpec),
            title = { Text("Card $cardIndex") },
            subtitle = {
                AnimatedVisibility(isExpanded) { Text("Expanded content is available here") }
            },
            content = { Text("Tap to expand") },
        )
    }
}