DropDownMenuForm.kt

package com.example.wms_v2.views.transfer.components

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusDirection
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.wms_v2.helper.colors.ButtonColorsHelper


@Composable
fun TransferDestination() {
    val optionsA = listOf("-", "A1", "A2", "A3", "A4")
    val optionsB = listOf("-", "B1", "B2", "B3", "B4")
    val optionsC = listOf("-", "C1", "C2", "C3", "C4",)
    val optionsD = listOf("-", "D1", "D2", "D3", "D4",)
    var selectedA by remember { mutableStateOf("-") }
    var selectedB by remember { mutableStateOf("-") }
    var selectedC by remember { mutableStateOf("-") }
    var selectedD by remember { mutableStateOf("-") }

    var expanded0 by remember { mutableStateOf(false) }
    var expanded1 by remember { mutableStateOf(false) }
    var expanded2 by remember { mutableStateOf(false) }
    var expanded3 by remember { mutableStateOf(false) }

    // IME handler
    val focusManager = LocalFocusManager.current

    val columnModifier = Modifier
        .width(250.dp)
        .padding(end = 8.dp)

    val cornerRadius = 50
    val firstButtonShape = RoundedCornerShape(
        topStartPercent = cornerRadius,
        topEndPercent = 0,
        bottomStartPercent = cornerRadius,
        bottomEndPercent = 0
    )
    val lastButtonShape = RoundedCornerShape(
        topStartPercent = 0,
        topEndPercent = cornerRadius,
        bottomStartPercent = 0,
        bottomEndPercent = cornerRadius
    )
    var selectedBatB by remember { mutableStateOf(true) }
    val colorSelected = Color(0xFF3F6CB4)
    val colorUnselected = Color(0x803F6CB4)
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "$expanded0, $selectedA, ${selectedA != "-"}")
        Text(text = "$expanded1, $selectedB, ${selectedB != "-"}")
        Text(text = "$expanded2, $selectedC, ${selectedC != "-"}")
        Text(text = "$expanded3, $selectedD, ${selectedD != "-"}")

        
        val centerHorizon = Alignment.CenterHorizontally
        Row(
            modifier = Modifier.padding(4.dp),
        ) {
            Column(modifier = columnModifier.weight(1f), horizontalAlignment = centerHorizon) {
                InputSelect(
                    label = "Choice A",
                    isEnabled = true,
                    expanded = expanded0,
                    list = optionsA,
                    value = selectedA,
                    onExpandedChange = {
                        expanded0 = !expanded0
                    },
                    onSelect = {
                        selectedA = it
                        if (it != "-") {
                            focusManager.moveFocus(FocusDirection.Next)
                            expanded1 = !expanded1
                        }
                    }
                )
            }
            Column(modifier = columnModifier.weight(1f), horizontalAlignment = centerHorizon) {
                InputSelect(
                    label = "Choice B",
                    isEnabled = true,
                    expanded = expanded1,
                    list = optionsB,
                    value = selectedB,
                    onExpandedChange = {
                        expanded1 = !expanded1
                    },
                    onSelect = {
                        selectedB = it
                        if (it != "-") {
                            focusManager.moveFocus(FocusDirection.Next)
                            expanded2 = !expanded2
                        }
                    }
                )
            }
        }
        
        Row(
            modifier = Modifier.padding(horizontal = 4.dp)
        ) {
            Column(modifier = columnModifier.weight(1f), horizontalAlignment = centerHorizon) {
                InputSelect(
                    label = "Choice C",
                    isEnabled = true,
                    expanded = expanded2,
                    list = optionsC,
                    value = selectedC,
                    onExpandedChange = {
                        expanded2 = !expanded2
                    },
                    onSelect = {
                        selectedC = it
                        if (it != "-") {
                            focusManager.moveFocus(FocusDirection.Next)
                            expanded3 = !expanded3
                        }
                    }
                )
            }
            Column(modifier = columnModifier.weight(1f), horizontalAlignment = centerHorizon) {
                InputSelect(
                    label = "Choice D",
                    isEnabled = true,
                    expanded = expanded3,
                    list = optionsD,
                    value = selectedD,
                    onExpandedChange = {
                        expanded3 = !expanded3
                    },
                    onSelect = {
                        selectedD = it
                    }
                )
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun InputSelect(
    label: String = "Label",
    isEnabled: Boolean,
    expanded: Boolean,
    list: List<String>,
    value: String,
    onExpandedChange: () -> Unit,
    onSelect: (str: String) -> Unit
) {
    // We want to react on tap/press on TextField to show menu
    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = {
            println("onExpandedChange: label? $label; isEnabled? $isEnabled")
            if (isEnabled) {
                onExpandedChange()
            }
        },
    ) {
        OutlinedTextField(
            // The `menuAnchor` modifier must be passed to the text field for correctness.
            modifier = Modifier
                .menuAnchor()
                .padding(4.dp),
//            enabled = isEnabled,
            enabled = isEnabled,
            readOnly = true,
            value = value,
            onValueChange = {},
            label = { Text(label) },
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
            colors = ExposedDropdownMenuDefaults.textFieldColors(),
            shape = RoundedCornerShape(8.dp),
        )
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = {
                onExpandedChange()
            },
        ) {
            list.forEach { selectionOption ->
                DropdownMenuItem(
                    text = { Text(selectionOption) },
                    onClick = {
//                        selectedOptionText = selectionOption
//                        expanded = false
                        onSelect(selectionOption)
                        onExpandedChange()
                        println("select + change expand")
                    },
                    contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
                )
            }
        }
    }
}