@Stable
data class NotificationViewModelItem(
    val title: String ?,
    val body: String ?,
    val imageDescriptor: ImageDescriptor?,
    var isViewed : MutableState<Boolean>,
    val type: Int = 0,
    val timeStamp : Long
)

val scrollState: LazyListState = rememberLazyListState()
LazyColumn(
    state = scrollState,
    modifier = Modifier
        .fillMaxSize()
        .padding(
            start = 16.dp, end = 16.dp
        )

) {
    itemsIndexed(entries){index: Int, item->
        NotificationCard(item, index, onItemClicked)

    }
}

@Composable
fun NotificationCard(
    item: NotificationViewModelItem,
    index: Int,
    onItemClicked: OnItemClicked<NotificationViewModelItem>? = null
) {

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .clickable(
                onClick = {
                    onItemClicked?.onItemClicked(item, index)
                },
                indication = rememberRipple(),
                interactionSource = remember { MutableInteractionSource() }
            ),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        HzImage(
            imageDescriptor = null,
            placeHolder = defaultPlaceholder(),
            emptyHolder = painterResource(
                id = getEmptyDrawable(Notification().apply { Type = item.type })
            ),
            modifier = Modifier
                .size(60.dp)
                .clip(CircleShape),
            contentScale = if (item.imageDescriptor != null && item.imageDescriptor.hasWhiteBg()) ContentScale.Fit else ContentScale.Crop,
        )
        Spacer(Modifier.size(10.dp))
        Column(
            modifier = Modifier.weight(1f),
        ) {
            if (!item.title.isNullOrEmpty()) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = item.title ?: "",
                    color = Color.Black,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            }
            Text(
                modifier = Modifier.fillMaxWidth(),
                text = item.body ?: "",
                color = Color.Black,
                maxLines = 3,
                overflow = TextOverflow.Ellipsis
            )
            Text(
                modifier = Modifier.fillMaxWidth(),
                text = AndroidCore.services().stringFormatter().formatDateForNotifications(item.timeStamp),
                color = Color.Black,
                overflow = TextOverflow.Ellipsis
            )
        }

        ViewedIndicator(item.isViewed.value)
    }
}

@Composable
fun ViewedIndicator(isViewed: Boolean) {
    Box(
        modifier = Modifier
            .size(14.dp)
            .background(color = HouzzTheme.colors.accentDefault.copy(alpha = if (!isViewed) 1f else 0f), shape = CircleShape)
    )

}