package com.aiosman.riderpro.ui.follower

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.pullrefresh.PullRefreshIndicator
import androidx.compose.material.pullrefresh.pullRefresh
import androidx.compose.material.pullrefresh.rememberPullRefreshState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
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

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun FollowingListScreen(userId: Int) {
    val model = FollowingListViewModel
    val scope = rememberCoroutineScope()
    val refreshState = rememberPullRefreshState(model.isLoading, onRefresh = {
        model.loadData(userId, true)
    })
    LaunchedEffect(Unit) {
        model.loadData(userId)
    }
    StatusBarMaskLayout(
        modifier = Modifier
            .background(color = Color(0xFFFFFFFF))
            .padding(horizontal = 16.dp),
        maskBoxBackgroundColor = Color(0xFFFFFFFF)
    ) {
        var dataFlow = model.usersFlow
        var users = dataFlow.collectAsLazyPagingItems()
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 16.dp)
        ) {
            NoticeScreenHeader(stringResource(R.string.following_upper), moreIcon = false)
        }
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .pullRefresh(refreshState)
        ) {
            LazyColumn(
                modifier = Modifier.fillMaxSize()
            ) {
                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)
                                }
                            }
                        }
                    }
                }
            }
            PullRefreshIndicator(
                refreshing = model.isLoading,
                state = refreshState,
                modifier = Modifier.align(Alignment.TopCenter)
            )
        }
    }
}