package com.aiosman.riderpro.ui.follower

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.paging.compose.collectAsLazyPagingItems
import com.aiosman.riderpro.R
import com.aiosman.riderpro.ui.comment.NoticeScreenHeader
import com.aiosman.riderpro.ui.composables.StatusBarMaskLayout
import kotlinx.coroutines.launch

@Composable
fun FollowerListScreen(userId: Int) {
    val model = FollowerListViewModel
    val scope = rememberCoroutineScope()
    LaunchedEffect(Unit) {
        model.loadData(userId)
    }
    StatusBarMaskLayout(
        modifier = Modifier.padding(horizontal = 16.dp)
    ) {
        var dataFlow = model.usersFlow
        var users = dataFlow.collectAsLazyPagingItems()
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 16.dp)
        ) {
            NoticeScreenHeader(stringResource(R.string.followers_upper), moreIcon = false)
        }
        LazyColumn(
            modifier = Modifier.weight(1f)
        ) {
            items(users.itemCount) { index ->
                users[index]?.let { user ->
                    FollowItem(
                        avatar = user.avatar,
                        nickname = user.nickName,
                        userId = user.id,
                        isFollowing = user.isFollowing
                    ) {
                        scope.launch {
                            if (user.isFollowing) {
                                model.unFollowUser(user.id)
                            } else {
                                model.followUser(user.id)
                            }
                        }
                    }
                }
            }
        }
    }
}