Package-level declarations

private val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
private var expanded by remember { mutableStateOf(false) }
private val state = rememberTextFieldState()

SingleChoiceComboBox(
    state = state,
    expanded = expanded,
    onExpandedChange = { expanded = it },
    onDismissRequest = { expanded = false },
    label = "Select an option",
) {
    options.forEach { option ->
        DropdownMenuItem(
            text = { Text(option) },
            selected = false,
            onClick = { expanded = false }
        )
    }
}

// Your data source from your state model
private val ComboBoxStubData = persistentListOf(
    "To Kill a Mockingbird", "War and Peace", "The Idiot",
    "A Picture of Dorian Gray", "1984", "Pride and Prejudice",
)

private var selectedChoices by remember {
    mutableStateOf(persistentListOf(
        SelectedChoice("1", "To Kill a Mockingbird"),
        SelectedChoice("2", "War and Peace")
    ))
}

MultiChoiceComboBox(
    state = rememberTextFieldState(),
    expanded = expanded,
    onExpandedChange = { expanded = it },
    onDismissRequest = { expanded = false },
    selectedChoices = selectedChoices,
    onSelectedClick = { id ->
        selectedChoices = selectedChoices.filter { it.id != id }.toPersistentList()
    },
    label = "Select books",
) {
    ComboBoxStubData.forEachIndexed { index, book ->
        DropdownMenuItem(
            text = { Text(book) },
            selected = selectedChoices.any { it.label == book },
            onClick = {
                val choice = SelectedChoice(index.toString(), book)
                selectedChoices = if (selectedChoices.any { it.id == choice.id }) {
                    selectedChoices.filter { it.id != choice.id }.toPersistentList()
                } else {
                    selectedChoices.add(choice)
                }
            }
        )
    }
}

private val allOptions = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
private var expanded by remember { mutableStateOf(false) }
private val state = rememberTextFieldState()
private val filteredOptions = remember(state.text) {
    allOptions.filter { it.contains(state.text, ignoreCase = true) }
}

SingleChoiceComboBox(
    state = state,
    expanded = expanded,
    onExpandedChange = { expanded = it },
    onDismissRequest = { expanded = false },
    label = "Search and select",
) {
    if (filteredOptions.isEmpty()) {
        DropdownMenuItem(
            text = { Text("No matches found") },
            onClick = { }
        )
    } else {
        filteredOptions.forEach { option ->
            DropdownMenuItem(
                text = { Text(option) },
                selected = false,
                onClick = { expanded = false }
            )
        }
    }
}

private val groupedOptions = mapOf(
    "Fiction" to listOf("To Kill a Mockingbird", "War and Peace", "The Idiot"),
    "Classics" to listOf("A Picture of Dorian Gray", "1984", "Pride and Prejudice")
)

SingleChoiceComboBox(
    state = state,
    expanded = expanded,
    onExpandedChange = { expanded = it },
    onDismissRequest = { expanded = false },
    label = "Select a book",
) {
    groupedOptions.forEach { (groupName, books) ->
        DropdownMenuGroupItem(
            title = { Text(groupName) }
        ) {
            books.forEach { book ->
                DropdownMenuItem(
                    text = { Text(book) },
                    selected = false,
                    onClick = { expanded = false }
                )
            }
        }
    }
}

@Composable
fun SingleChoiceComboBox(
    state: TextFieldState,
    expanded: Boolean,
    onExpandedChange: (Boolean) -> Unit,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    required: Boolean = false,
    label: String? = null,
    placeholder: String? = null,
    helper: String? = null,
    leadingContent: @Composable (AddonScope.() -> Unit)? = null,
    status: FormFieldStatus? = null,
    statusMessage: String? = null,
    inputTransformation: InputTransformation? = null,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    onKeyboardAction: KeyboardActionHandler? = null,
    lineLimits: TextFieldLineLimits = TextFieldLineLimits.Default,
    onTextLayout: (Density.(getResult: () -> TextLayoutResult?) -> Unit)? = null,
    interactionSource: MutableInteractionSource? = null,
    outputTransformation: OutputTransformation? = null,
    scrollState: ScrollState = rememberScrollState(),
    dropdownContent: @Composable SingleChoiceDropdownItemColumnScope.() -> Unit,
)

@Composable
fun MultiChoiceComboBox(
    state: TextFieldState,
    expanded: Boolean,
    onExpandedChange: (Boolean) -> Unit,
    onDismissRequest: () -> Unit,
    selectedChoices: ImmutableList<SelectedChoice>,
    onSelectedClick: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    required: Boolean = false,
    label: String? = null,
    placeholder: String? = null,
    helper: String? = null,
    leadingContent: @Composable (AddonScope.() -> Unit)? = null,
    status: FormFieldStatus? = null,
    statusMessage: String? = null,
    inputTransformation: InputTransformation? = null,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    onKeyboardAction: KeyboardActionHandler? = null,
    lineLimits: TextFieldLineLimits = TextFieldLineLimits.Default,
    onTextLayout: (Density.(getResult: () -> TextLayoutResult?) -> Unit)? = null,
    interactionSource: MutableInteractionSource? = null,
    outputTransformation: OutputTransformation? = null,
    scrollState: ScrollState = rememberScrollState(),
    dropdownContent: @Composable MultiChoiceDropdownItemColumnScope.() -> Unit,
)

@Composable
fun BasicSingleChoiceComboBox() {
    val state = rememberTextFieldState()
    var expanded by remember { mutableStateOf(false) }
    
    SingleChoiceComboBox(
        state = state,
        expanded = expanded,
        onExpandedChange = { expanded = it },
        onDismissRequest = { expanded = false },
        label = "Select an option",
        placeholder = "Choose an option",
    ) {
        for (i in 1..5) {
            DropdownMenuItem(
                text = { Text("Option $i") },
                selected = false,
                onClick = { expanded = false }
            )
        }
    }
}

@Composable
fun BasicMultiChoiceComboBox() {
    val state = rememberTextFieldState()
    var expanded by remember { mutableStateOf(false) }
    var selectedChoices by remember { mutableStateOf(persistentListOf<SelectedChoice>()) }
    
    MultiChoiceComboBox(
        state = state,
        expanded = expanded,
        onExpandedChange = { expanded = it },
        onDismissRequest = { expanded = false },
        selectedChoices = selectedChoices,
        onSelectedClick = { id ->
            selectedChoices = selectedChoices.filter { it.id != id }.toPersistentList()
        },
        label = "Select options",
        placeholder = "Choose options",
    ) {
        for (i in 1..5) {
            DropdownMenuItem(
                text = { Text("Option $i") },
                selected = selectedChoices.any { it.id == "option$i" },
                onClick = {
                    val choice = SelectedChoice("option$i", "Option $i")
                    selectedChoices = if (selectedChoices.any { it.id == choice.id }) {
                        selectedChoices.filter { it.id != choice.id }.toPersistentList()
                    } else {
                        selectedChoices.add(choice)
                    }
                }
            )
        }
    }
}

private val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
private var expanded by remember { mutableStateOf(false) }
private var selectedOptionText by remember { mutableStateOf(options[0]) }
Dropdown(
    value = selectedOptionsText,
    label = "label",
    onDismissRequest = {
        expanded = false
    },
    expanded = expanded,
    onExpandedChange = {
        expanded = !expanded
    },
) {
    options.forEach { selectionOption ->
        DropdownMenuItem(
            onClick = {
                selectedOptionText = selectionOption
                expanded = false
            },
        ) {
            Text(text = selectionOption)
        }
    }
}

// Your data source from your state model
private val DropdownStubData = persistentListOf(
    "To Kill a Mockingbird", "War and Peace", "The Idiot",
    "A Picture of Dorian Gray", "1984", "Pride and Prejudice",
)
private val multiSelectionFilter by remember { mutableStateOf(DropdownStubData) }

private var selectedItems by remember {
    mutableStateOf(listOf("To Kill a Mockingbird", "War and Peace"))
}
private val multiSelectedValues by remember(selectedItems.size) {
    derivedStateOf {
        val suffix = if (selectedItems.size 1) ", +${selectedItems.size - 1}" else ""
        selectedItems.firstOrNull().orEmpty() + suffix
    }
}

SelectTextField(
    value = multiSelectedValues,
    // ...
) {
    multiSelectionFilter.forEach { book ->
        // This should be part of your model otherwise it's a huge work that done on
        // each items but we're simplifying things since it's an example here.
        val isSelected = book in selectedItems
        DropdownMenuItem(
            text = {
                Text(
                    text = book,
                    style = if (isSelected) {
                        SparkTheme.typography.body1.highlight
                    } else {
                        SparkTheme.typography.body1
                    },
                )
            },
            onClick = {
                selectedItems = if (book in selectedItems) {
                    selectedItems - book
                } else {
                    selectedItems + book
                }
                // Here we want to have the dropdown to stay expanded when we multiSelect but
                // you could use the line below if in the case you want to have the same behaviour
                // as the single selection.
                // expanded = false
            },
        )
    }
}

private val singleSelectionFilter by remember { mutableStateOf(DropdownStubData) }

private var singleSelected by remember { mutableStateOf("") }

Dropdown(
    value = singleSelected,
    // ...
) {
    singleSelectionFilter.forEach { (groupName, books) ->
        DropdownMenuGroupItem(
            title = { Text(groupName) }, // You can customize the style of the label here
        ) {
            books.forEach { book ->
                DropdownMenuItem(
                    text = { Text(book) },
                    onClick = {
                        singleSelected = book
                        expanded = false
                    },
                )
            }
        }
    }
}

MultilineTextField(
    value = "Input",
    label = { Text("Label") },
    placeholder = { Text("Placeholder") },
    leadingIcon = {
        Icon(
            imageVector = Icons.Filled.ArrowDropDown,
            contentDescription = null
        )
    },
    onValueChange = { newValue -> }
)

MultilineTextField(
    value = "Input",
    label = { Text("Label") },
    placeholder = { Text("Placeholder") },
    leadingIcon = {
        // Prefix
        Text("Prefix", modifier = Modifier.padding(start = 16.dp))
    },
    leadingIcon = {
        // Suffix
        Text("Suffix", modifier = Modifier.padding(end = 16.dp))
    },
    onValueChange = { newValue -> }
)

TextField(
    value = "Input",
    label = { Text("Label") },
    placeholder = { Text("Placeholder") },
    leadingContent = {
        Icon(
            imageVector = Icons.Filled.ArrowDropDown,
            contentDescription = null
        )
    },
    onValueChange = { newValue -> }
)

TextField(
    value = "Input",
    label = { Text("Label") },
    placeholder = { Text("Placeholder") },
    leadingContent = {
        // Prefix
        Text("Prefix", modifier = Modifier.padding(start = 16.dp))
    },
    trailingContent = {
        // Suffix
        Text("Suffix", modifier = Modifier.padding(end = 16.dp))
    },
    onValueChange = { newValue -> }
)