package com.syaroful.agrilinkvocpro.growth_recipe_feature.presentation.recipe

import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DynamicBottomSheet(
    modifier: Modifier = Modifier,
    width: Float = 0.5f,
    options: List<String> = listOf("Pilih Item"),
    onValueSelected: (String) -> Unit,
) {
    val (showSheet, setShowSheet) = remember { mutableStateOf(false) }
    val (selectedOption, setSelectedOption) = remember { mutableStateOf(options[0]) }
    val sheetState = rememberModalBottomSheetState()

    // Trigger UI to open the sheet
    Row(
        modifier = modifier
            .clickable { setShowSheet(true) }
            .border(
                width = 1.dp,
                shape = RoundedCornerShape(8.dp),
                color = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.3f)
            )
            .padding(8.dp)
            .fillMaxWidth(width),

        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = selectedOption)
        Spacer(modifier = Modifier.weight(1f))
        Icon(
            imageVector = Icons.Filled.ArrowDropDown,
            contentDescription = "Dropdown Arrow"
        )
    }

    if (showSheet) {
        ModalBottomSheet(
            onDismissRequest = { setShowSheet(false) },
            sheetState = sheetState
        ) {
            options.forEach { option ->
                Text(
                    text = option,
                    modifier = Modifier
                        .fillMaxWidth()
                        .clickable {
                            onValueSelected(option)
                            setSelectedOption(option)
                            setShowSheet(false)
                        }
                        .padding(16.dp)
                )
            }
        }
    }
}