@Composable
fun ExpandableSearchTextField(
    expanded: Boolean,
    onSearchIconClicked: () -> Unit,
    searchInput: String,
    onSearchInputChange: (String) -> Unit,
    onFocusLost: () -> Unit,
    modifier: Modifier = Modifier,
) {
    val focusRequester = remember { FocusRequester() }

    Box(modifier) {
        if (!expanded) {
            IconButton(onClick = onSearchIconClicked) {
                Icon(
                    imageVector = Icons.Default.Search,
                    contentDescription = stringResource(R.string.search),
                )
            }
        } else {
            val tint = LocalContentColor.current.copy(LocalContentAlpha.current)
            TextField(
                value = searchInput,
                onValueChange = onSearchInputChange,
                colors = TextFieldDefaults.textFieldColors(
                    focusedIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent,
                    backgroundColor = Color.Transparent,
                    cursorColor = tint
                ),
                placeholder = {
                    Text(
                        stringResource(R.string.search_field_hint),
                        color = tint
                    )
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .focusRequester(focusRequester)
                    .onFocusChanged { focusState ->
                        if (!focusState.isFocused) {
                            onFocusLost()
                        }
                    }
            )
            SideEffect {
                focusRequester.requestFocus()
            }
        }
    }
}