Overlapping jetpack compose code.

import android.net.Uri
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.animateContentSize
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.windowInsetsBottomHeight
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.IconButton
import androidx.compose.material.TextField
import androidx.compose.material.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.zIndex
import com.wkiddiebox.compose.ui.element.image.Icon
import com.wkiddiebox.compose.ui.element.image.Icons
import com.wkiddiebox.compose.ui.element.image.Image
import com.wkiddiebox.compose.ui.element.text.Clause
import com.wkiddiebox.compose.ui.element.text.Text
import com.wkiddiebox.compose.ui.element.text.asText
import com.wkiddiebox.compose.ui.theme.KiddieboxTheme
import com.wkiddiebox.compose.ui.theme.Theme
import com.wkiddiebox.compose.ui.theme.Theme.shape
import com.wkiddiebox.feature.messaging.ui.R

private const val TEXT_FONT_SIZE = 16
private const val SEND_BUTTON_IMAGE_SIZE = 30
private const val DISMISSABLE_IMAGE_SIZE = 100

@Composable
fun MessageTextField(
    value: String,
    placeholder: Clause,
    imageUri: List<Uri>?,
    onCaptureImageClick: () -> Unit,
    onPickImageClick: () -> Unit,
    onSendButtonClick: () -> Unit,
    onRemoveImageClick: (Uri) -> Unit,
    onValueChange: (value: String) -> Unit
) {

    val containerShape = RoundedCornerShape(
        topStart = 20.dp,
        topEnd = 20.dp
    )

    Box {
        Column(
            modifier = Modifier
                .clip(containerShape)
                .border(
                    width = 0.2.dp,
                    color = Theme.colors.border.primaryOnLight,
                    shape = containerShape
                )
                .background(color = Theme.colors.surfaceInteractive.enabledOnLight)
                .padding(
                    top = Theme.spacing.x3
                )
        ) {
            TextField(
                value = value,
                onValueChange = onValueChange,
                modifier = Modifier.fillMaxWidth(),
                keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Sentences),
                colors = TextFieldDefaults.textFieldColors(
                    backgroundColor = Color.Transparent,
                    focusedIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent,
                    unfocusedLabelColor = Color.Transparent
                ),
                textStyle = Theme.typography.textField.copy(
                    fontWeight = FontWeight.Medium,
                    fontSize = TEXT_FONT_SIZE.sp,
                ),
                placeholder = {
                    Text(clause = placeholder)
                },
                trailingIcon = {
                    IconButton(
                        onClick = onSendButtonClick,
                        enabled = if (value.isNotBlank()) true else false,
                        content = {
                            SendButton()
                        }
                    )
                },
                maxLines = 6
            )

            Column(modifier = Modifier.height(25.dp)) {
                AnimatedVisibility(
                    visible = value.isNotBlank(),
                    enter = scaleIn(),
                    exit = scaleOut()
                ) {
                    Row(modifier = Modifier.padding(start = Theme.spacing.x4)) {
                        Image(
                            image = Image.Drawable(R.drawable.ic_camera),
                            modifier = Modifier
                                .size(22.dp)
                                .clickable {
                                    onCaptureImageClick.invoke()
                                }
                        )
                        Spacer(modifier = Modifier.width(Theme.spacing.x3))
                        Image(
                            image = Image.Drawable(R.drawable.ic_upload),
                            modifier = Modifier
                                .size(22.dp)
                                .clickable {
                                    onPickImageClick.invoke()
                                }
                        )
                    }
                }
            }
            Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars))
        }

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .horizontalScroll(rememberScrollState())
                .align(Alignment.BottomStart)
                .zIndex(2f)
                .graphicsLayer {
                    translationX = 100f
                    translationY = -200f
                }
        ) {
            DismissibleImage(
                uri = Uri.EMPTY,
                onRemove = { }
            )
        }
    }
}

@Composable
private fun SendButton() {
    Box(
        modifier = Modifier
            .clip(shape.imageShape)
            .background(
                color = Theme.colors.element.tertiaryOnLight,
                shape = shape.imageShape
            ),
        contentAlignment = Alignment.Center
    ) {
        Image(
            image = Icons.Utils.next,
            modifier = Modifier.size(SEND_BUTTON_IMAGE_SIZE.dp),
            colorFilter = ColorFilter.tint(color = Color.White)
        )
    }
}

@Composable
private fun DismissibleImage(uri: Uri, onRemove: () -> Unit) {
    Box(
        modifier = Modifier.wrapContentSize()
    ) {

        Box(
            modifier = Modifier
                .clip(RoundedCornerShape(10.dp))
                .background(color = Theme.colors.surface.primaryDark)
                .size(DISMISSABLE_IMAGE_SIZE.dp)
        )

        Icon(
            image = Icons.Navigation.close,
            modifier = Modifier
                .size(Theme.spacing.x8)
                .zIndex(1f)
                .graphicsLayer {
                    translationX = -25f
                    translationY = -25f
                },
            onClick = onRemove
        )
    }
}

@Preview
@Composable
fun MessageTextFieldPreview() {
    KiddieboxTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(color = Theme.colors.surface.primaryLight),
            contentAlignment = Alignment.Center
        ) {
            MessageTextField(
                value = "some messages here",
                onCaptureImageClick = {},
                onPickImageClick = {},
                onRemoveImageClick = {},
                onSendButtonClick = {},
                placeholder = "Type your message here".asText(),
                onValueChange = {

                },
                imageUri = null
            )
        }
    }
}