package com.suno.android.ui.screens.create.text import android.os.Build.VERSION import android.os.Build.VERSION_CODES import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.animateContentSize import androidx.compose.animation.core.tween import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.add import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.InlineTextContent import androidx.compose.foundation.text.appendInlineContent import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.Icon import androidx.compose.material3.ModalBottomSheet import androidx.compose.material3.Scaffold import androidx.compose.material3.SheetState import androidx.compose.material3.Text import androidx.compose.material3.rememberModalBottomSheetState import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.paint import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.Placeholder import androidx.compose.ui.text.PlaceholderVerticalAlign import androidx.compose.ui.text.SpanStyle import androidx.compose.ui.text.buildAnnotatedString import androidx.compose.ui.text.withStyle import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.suno.android.common_ui.components.aura.auraBackground import com.suno.android.common_ui.components.omni.CircleIconButton import com.suno.android.common_ui.components.text_fields.CustomModeInputTextField import com.suno.android.common_ui.extensions.conditional import com.suno.android.common_ui.theme.ExtendedTheme import com.suno.android.ui.bottom_sheets.create.createBottomButtons import com.suno.android.common_res.R as CommonResR import com.suno.android.common_ui.R as CommonUIR @Composable fun LyricsBottomSheet( onDismiss: () -> Unit, sheetState: SheetState = rememberModalBottomSheetState(true), lyricsInput: String, onLyricTextInput: (String) -> Unit, enhanceLyricsLoading: Boolean, onEnhanceLyricsClicked: () -> Unit, onResetLyrics: () -> Unit, canUndo: Boolean = false, onUndo: () -> Unit, ) { ModalBottomSheet( onDismissRequest = { onDismiss.invoke() }, sheetState = sheetState, contentWindowInsets = { WindowInsets.safeDrawing }, ) { Scaffold( containerColor = Color.Transparent, modifier = Modifier.padding(horizontal = 16.dp), contentWindowInsets = WindowInsets.safeDrawing .add(WindowInsets.createBottomButtons), topBar = { LyricsBottomSheetTopBar( enhanceLyricsLoading = enhanceLyricsLoading, onEnhanceLyricsClicked = onEnhanceLyricsClicked, ) }, ) { contentPadding -> Box( modifier = Modifier .fillMaxSize() .padding(top = contentPadding.calculateTopPadding()), contentAlignment = Alignment.BottomCenter, ) { CustomModeInputTextField( modifier = Modifier.fillMaxSize(), disableTextInput = enhanceLyricsLoading, placeHolderText = stringResource(id = CommonResR.string.lyrics_placeholder), inputText = lyricsInput, onValueChange = { lyricsString -> onLyricTextInput.invoke(lyricsString) }, ) Row( modifier = Modifier .fillMaxWidth() .padding(bottom = 4.dp) .background(Color.Transparent), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.Bottom, ) { Spacer( modifier = Modifier.size(54.dp), ) Row( horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically, ) { AnimatedVisibility( visible = canUndo, enter = fadeIn(), exit = fadeOut(), ) { CircleIconButton( vectorDrawableResId = CommonUIR.drawable.refresh, contentDescription = stringResource(CommonResR.string.undo), onClick = { onUndo.invoke() }, ) } AnimatedVisibility( visible = lyricsInput.isNotEmpty() && !enhanceLyricsLoading, enter = fadeIn(), exit = fadeOut(), ) { CircleIconButton( vectorDrawableResId = CommonUIR.drawable.trash, contentDescription = stringResource(CommonResR.string.reset), onClick = { onResetLyrics.invoke() }, ) } } CircleIconButton( modifier = Modifier.size(54.dp), bgColor = ExtendedTheme.colors.backgroundInvert, iconColor = ExtendedTheme.colors.backgroundPrimary, vectorDrawableResId = CommonUIR.drawable.hide, contentDescription = stringResource(CommonResR.string.back), onClick = { onDismiss.invoke() }, ) } } } } } @Composable fun LyricsBottomSheetTopBar( enhanceLyricsLoading: Boolean, onEnhanceLyricsClicked: () -> Unit, ) { Row( modifier = Modifier .fillMaxWidth() .padding(bottom = 16.dp), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically, ) { Text( text = stringResource(id = CommonResR.string.lyrics), style = ExtendedTheme.typography.body, color = ExtendedTheme.colors.textTertiary, ) Row( modifier = Modifier .clip(RoundedCornerShape(24.dp)) .conditional( condition = enhanceLyricsLoading, ifTrue = { background(Color.Gray) }, ifFalse = { if (VERSION.SDK_INT >= VERSION_CODES.TIRAMISU) { auraBackground(enabled = true) } else { paint( painter = painterResource(CommonUIR.drawable.full_width_button_bg), contentScale = ContentScale.Crop, ) } }, ) .padding( horizontal = 16.dp, vertical = 8.dp, ) .clickable( enabled = !enhanceLyricsLoading, ) { onEnhanceLyricsClicked.invoke() } .animateContentSize( animationSpec = tween(durationMillis = 300), ), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), ) { if (enhanceLyricsLoading) { CircularProgressIndicator( modifier = Modifier.size(18.dp), color = Color.White, ) } else { Text( inlineContent = mapOf( "enhance_icon" to InlineTextContent( placeholder = Placeholder( width = 16.sp, height = 16.sp, placeholderVerticalAlign = PlaceholderVerticalAlign.Center, ), ) { Icon( modifier = Modifier.size(16.dp).padding(end = 4.dp), painter = painterResource(id = CommonUIR.drawable.enhance), contentDescription = null, tint = Color.White, ) }, ), text = buildAnnotatedString { withStyle(SpanStyle(color = Color.White)) { appendInlineContent("enhance_icon") append(stringResource(id = CommonResR.string.create)) } }, style = ExtendedTheme.typography.body, color = Color.White, ) } } } }