package dev.lonami.talaria.ui.screens import androidx.compose.foundation.Image import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.material.Divider import androidx.compose.material.Icon import androidx.compose.material.Surface import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.lifecycle.viewmodel.compose.viewModel import dev.lonami.talaria.R import dev.lonami.talaria.data.MockDialogRepository import dev.lonami.talaria.models.Dialog import dev.lonami.talaria.models.MessageAck import dev.lonami.talaria.ui.state.DialogViewModel import dev.lonami.talaria.ui.theme.TalariaTheme import java.time.format.DateTimeFormatter import java.time.format.FormatStyle @Composable fun Dialog(dialog: Dialog, onDialogSelected: () -> Unit, modifier: Modifier = Modifier) { Row( modifier = modifier .padding(4.dp) .clickable(onClick = onDialogSelected) ) { Image( painter = painterResource(R.drawable.ic_launcher_foreground), contentDescription = stringResource(R.string.profile_photo), contentScale = ContentScale.Fit, modifier = Modifier.height(48.dp), ) Column(modifier = Modifier.weight(1.0f)) { Text( dialog.title, fontWeight = FontWeight.SemiBold, maxLines = 1, overflow = TextOverflow.Ellipsis ) if (dialog.lastMessage != null) { Text( stringResource( R.string.message_preview, dialog.lastMessage.sender, dialog.lastMessage.text ), maxLines = 1, overflow = TextOverflow.Ellipsis, ) } } Column { if (dialog.lastMessage != null) { Row { when (dialog.lastMessage.ack) { MessageAck.RECEIVED -> {} MessageAck.SENT -> Icon( painterResource(R.drawable.sent), stringResource(R.string.sent) ) MessageAck.SEEN -> Icon( painterResource(R.drawable.seen), stringResource(R.string.seen) ) } Spacer(Modifier.width(8.dp)) Text( dialog.lastMessage.date.format( DateTimeFormatter.ofLocalizedTime( FormatStyle.SHORT ) ), ) } } if (dialog.pinned) { Icon( painterResource(R.drawable.tack), stringResource(R.string.pinned), modifier = Modifier.align(Alignment.End) ) } } } } @Composable fun DialogList( dialogs: List, onDialogSelected: (String) -> Unit, modifier: Modifier = Modifier, ) { LazyColumn(modifier = modifier) { items(dialogs.size) { Dialog(dialogs[it], onDialogSelected = { onDialogSelected(dialogs[it].id) }) Divider(startIndent = 52.dp) } } } @Composable fun DialogScreen( onDialogSelected: (String) -> Unit, modifier: Modifier = Modifier, dialogViewModel: DialogViewModel = viewModel(), ) { val dialogUiState by dialogViewModel.uiState.collectAsState() Surface(modifier = modifier) { DialogList(dialogUiState.dialogs, onDialogSelected = onDialogSelected) } } @Preview @Composable fun DialogPreview() { val viewModel = DialogViewModel(MockDialogRepository()) TalariaTheme { DialogScreen(onDialogSelected = { }, dialogViewModel = viewModel) } }