/*

* Copyright 2024 The Android Open Source Project

*

* Licensed under the Apache License, Version 2.0 (the "License");

* you may not use this file except in compliance with the License.

* You may obtain a copy of the License at

*

* https://www.apache.org/licenses/LICENSE-2.0

*

* Unless required by applicable law or agreed to in writing, software

* distributed under the License is distributed on an "AS IS" BASIS,

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

* See the License for the specific language governing permissions and

* limitations under the License.

*/

@file:OptIn(ExperimentalSharedTransitionApi::class, ExperimentalSharedTransitionApi::class)

package com.example.compose.snippets.animations.sharedelement

import androidx.compose.animation.AnimatedContent

import androidx.compose.animation.AnimatedVisibility

import androidx.compose.animation.ExperimentalSharedTransitionApi

import androidx.compose.animation.SharedTransitionLayout

import androidx.compose.animation.SharedTransitionScope

import androidx.compose.animation.fadeIn

import androidx.compose.animation.fadeOut

import androidx.compose.animation.scaleIn

import androidx.compose.animation.scaleOut

import androidx.compose.animation.togetherWith

import androidx.compose.foundation.Image

import androidx.compose.foundation.background

import androidx.compose.foundation.clickable

import androidx.compose.foundation.interaction.MutableInteractionSource

import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.aspectRatio

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.wrapContentWidth

import androidx.compose.foundation.lazy.LazyColumn

import androidx.compose.foundation.lazy.items

import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Text

import androidx.compose.material3.TextButton

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.draw.clip

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.layout.ContentScale

import androidx.compose.ui.res.painterResource

import androidx.compose.ui.tooling.preview.Preview

import androidx.compose.ui.unit.dp

import com.example.compose.snippets.R

private val listSnacks = listOf(

Snack("Cupcake", "", R.drawable.cupcake),

Snack("Donut", "", R.drawable.donut),

Snack("Eclair", "", R.drawable.eclair),

Snack("Froyo", "", R.drawable.froyo),

Snack("Gingerbread", "", R.drawable.gingerbread),

Snack("Honeycomb", "", R.drawable.honeycomb),

)

private val shapeForSharedElement = RoundedCornerShape(16.dp)

@OptIn(ExperimentalSharedTransitionApi::class)

@Preview

@Composable

private fun AnimatedVisibilitySharedElementShortenedExample() {

// [START android_compose_shared_elements_animated_visibility]

var selectedSnack by remember { mutableStateOf<Snack?>(null) }

SharedTransitionLayout(modifier = Modifier.fillMaxSize()) {

LazyColumn(

// [START_EXCLUDE]

modifier = Modifier

.fillMaxSize()

.background(Color.LightGray.copy(alpha = 0.5f))

.padding(16.dp),

verticalArrangement = Arrangement.spacedBy(8.dp)

// [END_EXCLUDE]

) {

items(listSnacks) { snack ->

AnimatedVisibility(

visible = snack != selectedSnack,

enter = fadeIn() + scaleIn(),

exit = fadeOut() + scaleOut(),

modifier = Modifier.animateItem()

) {

Box(

modifier = Modifier

.sharedBounds(

sharedContentState = rememberSharedContentState(key = "${snack.name}-bounds"),

// Using the scope provided by AnimatedVisibility

animatedVisibilityScope = this,

clipInOverlayDuringTransition = OverlayClip(shapeForSharedElement)

)

.background(Color.White, shapeForSharedElement)

.clip(shapeForSharedElement)

) {

SnackContents(

snack = snack,

modifier = Modifier.sharedElement(

sharedContentState = rememberSharedContentState(key = snack.name),

animatedVisibilityScope = this@AnimatedVisibility

),

onClick = {

selectedSnack = snack

}

)

}

}

}

}

// Contains matching AnimatedContent with sharedBounds modifiers.

SnackEditDetails(

snack = selectedSnack,

onConfirmClick = {

selectedSnack = null

}

)

}

// [END android_compose_shared_elements_animated_visibility]

}

@Composable

fun SharedTransitionScope.SnackEditDetails(

snack: Snack?,

modifier: Modifier = Modifier,

onConfirmClick: () -> Unit

) {

AnimatedContent(

modifier = modifier,

targetState = snack,

transitionSpec = {

fadeIn() togetherWith fadeOut()

},

label = "SnackEditDetails"

) { targetSnack ->

Box(

modifier = Modifier.fillMaxSize(),

contentAlignment = Alignment.Center

) {

if (targetSnack != null) {

Box(

modifier = Modifier

.fillMaxSize()

.clickable {

onConfirmClick()

}

.background(Color.Black.copy(alpha = 0.5f))

)

Column(

modifier = Modifier

.padding(horizontal = 16.dp)

.sharedBounds(

sharedContentState = rememberSharedContentState(key = "${targetSnack.name}-bounds"),

animatedVisibilityScope = this@AnimatedContent,

clipInOverlayDuringTransition = OverlayClip(shapeForSharedElement)

)

.background(Color.White, shapeForSharedElement)

.clip(shapeForSharedElement)

) {

SnackContents(

snack = targetSnack,

modifier = Modifier.sharedElement(

sharedContentState = rememberSharedContentState(key = targetSnack.name),

animatedVisibilityScope = this@AnimatedContent,

),

onClick = {

onConfirmClick()

}

)

Row(

Modifier

.fillMaxWidth()

.padding(bottom = 8.dp, end = 8.dp),

horizontalArrangement = Arrangement.End

) {

TextButton(onClick = { onConfirmClick() }) {

Text(text = "Save changes")

}

}

}

}

}

}

}

@Composable

fun SnackContents(

snack: Snack,

modifier: Modifier = Modifier,

onClick: () -> Unit

) {

Column(

modifier = modifier

.clickable(

interactionSource = remember { MutableInteractionSource() },

indication = null

) {

onClick()

}

) {

Image(

painter = painterResource(id = snack.image),

modifier = Modifier

.fillMaxWidth()

.aspectRatio(20f / 9f),

contentScale = ContentScale.Crop,

contentDescription = null

)

Text(

text = snack.name,

modifier = Modifier

.wrapContentWidth()

.padding(8.dp),

style = MaterialTheme.typography.titleSmall

)

}

}