import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeContentPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.composables.core.BottomSheetScope
import com.composables.core.DragIndication
import com.composables.core.ModalBottomSheet
import com.composables.core.ModalBottomSheetState
import com.composables.core.Scrim
import com.composables.core.Sheet
import com.composables.core.SheetDetent
import com.composables.core.SheetDetent.Companion.FullyExpanded
import com.composables.core.rememberModalBottomSheetState
import com.composeunstyled.Button
import com.composeunstyled.Text

@Composable
fun App() {
    val list = listOf("One", "Two", "Three")

    LazyColumn(
        modifier = Modifier
            .background(Color.White)
            .safeContentPadding()
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        items(list.size) { index ->
            val sheetState = rememberModalBottomSheetState(
                initialDetent = SheetDetent.Hidden,
            )
            ListItem(
                name = list[index],
                sheetState = sheetState,
                onShowSheet = { sheetState.targetDetent = FullyExpanded },
                onDismissSheet = { sheetState.targetDetent = SheetDetent.Hidden }
            )
        }
    }
}


@Composable
fun ListItem(
    name: String,
    sheetState: ModalBottomSheetState,
    onShowSheet: () -> Unit,
    onDismissSheet: () -> Unit
) {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        Text(name)
        Button(onClick = onShowSheet) {
            Text("Show Sheet")
        }
    }
    StyledModalBottomSheet(
        sheetState = sheetState,
        onDismiss = onDismissSheet,
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().height(400.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            DragIndication()
            Text("Sheet Content for $name")
            Button(onClick = onDismissSheet ) {
                Text("Hide Sheet")
            }
        }
    }
}

@Composable
fun StyledModalBottomSheet(
    sheetState: ModalBottomSheetState,
    onDismiss: () -> Unit,
    content: @Composable (BottomSheetScope.() -> Unit)
){
    ModalBottomSheet(
        state = sheetState,
        onDismiss = onDismiss
    ) {
        Scrim()
        Sheet(
            modifier = Modifier
                .fillMaxWidth(),
            backgroundColor = Color.White,
            content = content
        )
    }
}