package com.suno.android.common_ui.components.bottom_sheet import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.statusBars import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.ModalBottomSheet import androidx.compose.material3.SheetState import androidx.compose.material3.Text import androidx.compose.material3.rememberModalBottomSheetState 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.platform.LocalConfiguration import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.suno.android.common_ui.R import com.suno.android.common_ui.components.buttons.SunoMediumButton import com.suno.android.common_ui.components.list_items.RadioListItem import com.suno.android.common_ui.components.omni.CircleIconButton import com.suno.android.common_ui.theme.ExtendedTheme import com.suno.android.common_ui.theme.SunoTheme import com.suno.android.common_res.R as CommonResR @Composable fun SingleSelectionBottomSheet( sheetState: SheetState = rememberModalBottomSheetState(true), headerName: String = stringResource(CommonResR.string.title), options: List = emptyList(), activeOption: String? = null, confirmButtonName: String = "", onSelect: (String) -> Unit = {}, onConfirm: (String) -> Unit = {}, onDismiss: () -> Unit = {}, ) { var selectedOption by remember { mutableStateOf(activeOption) } ModalBottomSheet( onDismissRequest = onDismiss, sheetState = sheetState, dragHandle = null, ) { val statusBarHeightDp = with(LocalDensity.current) { WindowInsets.statusBars.getTop(LocalDensity.current).toDp() } Column( modifier = Modifier .background(ExtendedTheme.colors.backgroundSecondary) .fillMaxWidth() .defaultMinSize(minHeight = 128.dp) .heightIn( max = (LocalConfiguration.current.screenHeightDp - statusBarHeightDp.value).dp, ), ) { // Header Spacer(modifier = Modifier.height(16.dp)) Box( modifier = Modifier .fillMaxWidth() .height(64.dp), ) { Text( modifier = Modifier.align(Alignment.Center), text = headerName, style = ExtendedTheme.typography.introCopy, ) CircleIconButton( modifier = Modifier .align(Alignment.CenterEnd) .padding(16.dp), vectorDrawableResId = R.drawable.close, contentDescription = "Close", onClick = onDismiss, ) } Column( modifier = Modifier .background(ExtendedTheme.colors.backgroundSecondary) .fillMaxWidth() .padding(horizontal = 16.dp), ) { options.forEachIndexed { index, option -> RadioListItem( text = option, isSelected = selectedOption == option, onClick = { selectedOption = option onSelect(option) }, ) if (index < options.size - 1) { HorizontalDivider( thickness = 0.5.dp, color = ExtendedTheme.colors.borderPrimary, ) } } Spacer(modifier = Modifier.height(16.dp)) if (confirmButtonName.isNotEmpty() && onConfirm != { }) { SunoMediumButton( text = confirmButtonName, onClick = { selectedOption?.let { onConfirm(it) } }, modifier = Modifier.fillMaxWidth(), enabled = selectedOption != null, ) Spacer(modifier = Modifier.height(16.dp)) } } } } } @Preview(showSystemUi = true) @Composable private fun SingleSelectionBottomSheet_Preview() { SunoTheme { SingleSelectionBottomSheet( confirmButtonName = "Confirm", options = listOf( "option 1", "option 2", ), ) } }