@Composable
fun ReadOnlyTextField(
    onValueChangedListener: (text: String) -> Unit
) {

    var text by remember { mutableStateOf("") }
    var showDialog by remember { mutableStateOf(false) }

    if (showDialog) {
        DialogTextInput(
            onDismissed = {
                showDialog = false
            },
            onValueChangedListener = {
                text = it
            },
            text = text
        )
    }

    TextField(
        modifier = Modifier.clickable {
            showDialog = !showDialog
        },
        value = text,
        enabled = false,
        onValueChange = {
            onValueChangedListener(it)
        },
        readOnly = true
    )
}

@Composable
fun DialogTextInput(
    onDismissed: () -> Unit,
    onValueChangedListener: (text: String) -> Unit,
    text: String,
) {

    Dialog(
        onDismissRequest = {
            onDismissed()
        },
        properties = DialogProperties(dismissOnBackPress = true, dismissOnClickOutside = true)
    ) {
        Surface(
            modifier = Modifier
                .padding(10.dp),
            color = MaterialTheme.colors.background,
            contentColor = MaterialTheme.colors.onBackground
        ) {
            TextField(
                value = text,
                onValueChange = {
                    onValueChangedListener(it)
                },
                keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
                keyboardActions = KeyboardActions(
                    onDone = {
                        onDismissed()
                    }
                )
            )
        }
    }
}