package com.suno.android.ui.screens.create.text import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.items import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.vectorResource import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.unit.dp import com.suno.android.common_ui.components.buttons.RoundedPillContainer 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.theme.ExtendedTheme import kotlinx.collections.immutable.ImmutableList import com.suno.android.common_res.R as CommonResR import com.suno.android.common_ui.R as CommonUIR private const val TRIGGER_STYLES_REFRESH_COUNT = 3 private const val CHAR_COUNT_TEXT_ALPHA = 0.5f @Composable fun StylesInputCard( styleInput: String, onStyleTextInput: (String) -> Unit, enhanceStyleFlagEnabled: Boolean? = false, enhanceStyleLoading: Boolean? = false, onEnhanceStyleClicked: () -> Unit, onResetStyle: () -> Unit, resetFieldsFlagEnabled: Boolean? = false, recommendStyles: ImmutableList, isOverStyleLimit: Boolean, maxStyleChars: Int, onRefreshRecommendedStyles: () -> Unit, ) { Card( modifier = Modifier.fillMaxWidth(), colors = CardDefaults.cardColors( containerColor = ExtendedTheme.colors.backgroundTertiary, ), shape = MaterialTheme.shapes.small, ) { Column( modifier = Modifier.padding(bottom = 8.dp), ) { Row( modifier = Modifier .fillMaxWidth() .padding(vertical = 12.dp, horizontal = 16.dp) .height(48.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween, ) { Text( text = stringResource(id = CommonResR.string.song_description), style = ExtendedTheme.typography.body, color = ExtendedTheme.colors.textPrimary, ) Row( horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically, ) { if (resetFieldsFlagEnabled == true) { AnimatedVisibility( visible = !styleInput.isEmpty(), enter = fadeIn(), exit = fadeOut(), ) { CircleIconButton( bgColor = ExtendedTheme.colors.backgroundTertiary, vectorDrawableResId = CommonUIR.drawable.trash, contentDescription = stringResource(CommonResR.string.reset), onClick = { onResetStyle.invoke() }, ) } } if (enhanceStyleFlagEnabled == true) { CircleIconButton( bgColor = Color.Transparent, auraBg = true, enabled = enhanceStyleLoading == false, showProgressIndicator = enhanceStyleLoading == true, vectorDrawableResId = CommonUIR.drawable.enhance, iconColor = Color.White, contentDescription = stringResource(CommonResR.string.enhance), onClick = { onEnhanceStyleClicked.invoke() }, ) } } } CustomModeInputTextField( disableTextInput = enhanceStyleLoading, modifier = Modifier.height(180.dp), textFieldPadding = PaddingValues(horizontal = 16.dp), placeHolderText = stringResource(id = CommonResR.string.style_placeholder), inputText = styleInput, onValueChange = { styleString -> onStyleTextInput.invoke(styleString) }, keyboardOptions = KeyboardOptions.Default.copy( showKeyboardOnFocus = true, keyboardType = KeyboardType.Text, imeAction = ImeAction.Done, ), bottomContent = { LazyRow( contentPadding = PaddingValues(horizontal = 16.dp), modifier = Modifier.height(56.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), ) { item { RoundedPillContainer( onClick = { val songStyle = recommendStyles.random() val prompt = styleInput if (prompt.isEmpty()) { onStyleTextInput.invoke(songStyle) } else { onStyleTextInput.invoke("$prompt, $songStyle") } }, ) { Icon( imageVector = ImageVector.vectorResource( id = CommonUIR.drawable.dice, ), contentDescription = null, tint = ExtendedTheme.colors.textPrimary, ) } } if (recommendStyles.isNotEmpty()) { val filteredStyles = recommendStyles.filter { style -> !styleInput.contains(style) } items(filteredStyles) { songStyle -> RoundedPillContainer( onClick = { val prompt = styleInput if (prompt.isEmpty()) { onStyleTextInput.invoke(songStyle) } else { onStyleTextInput.invoke("$prompt, $songStyle") } }, ) { Row( verticalAlignment = Alignment.CenterVertically, ) { Icon( imageVector = ImageVector.vectorResource( id = CommonUIR.drawable.plus, ), contentDescription = null, tint = ExtendedTheme.colors.textPrimary, ) Spacer(modifier = Modifier.width(4.dp)) Text( text = songStyle, style = ExtendedTheme.typography.smallBody, color = ExtendedTheme.colors.textPrimary, ) } } } // Check if we're near the end of the list and fetch more styles if (filteredStyles.size <= TRIGGER_STYLES_REFRESH_COUNT) { onRefreshRecommendedStyles.invoke() } } } }, ) Row( modifier = Modifier .fillMaxWidth() .padding(top = 4.dp, end = 16.dp), horizontalArrangement = Arrangement.End, ) { Text( style = ExtendedTheme.typography.smallBody, modifier = Modifier.alpha(CHAR_COUNT_TEXT_ALPHA), color = if (isOverStyleLimit) { ExtendedTheme.colors.warning } else { ExtendedTheme.colors.textPrimary }, text = "${styleInput.length} / $maxStyleChars", ) } } } }