package com.example.what_the_fantasy.ui.screens

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.what_the_fantasy.R
import com.example.what_the_fantasy.data.local.DailyQuoteStub
import com.example.what_the_fantasy.data.services.IServices
import com.example.what_the_fantasy.ui.components.NavBar
import com.example.what_the_fantasy.ui.components.QuoteLittle
import com.example.what_the_fantasy.ui.states.CurrentUserState
import com.example.what_the_fantasy.ui.viewModels.CurrentUserViewModel

@Composable
fun AccueilPage(
    navFavorite: (Int) -> Unit,
    navQuiz: (Int) -> Unit,
    navProfil: (Int) -> Unit,
    navQuote: (Int) -> Unit,
    services: IServices,
    currentUserVM : CurrentUserViewModel,
    currentUserState : CurrentUserState,

    ) {
    var itemCount by remember { mutableIntStateOf(15) }
    val dailyQuote = DailyQuoteStub.dailyQuote
    val quotes = services.getAllQuote().take(itemCount)

    val titleDalyQuote = stringResource(R.string.TitleHomeDailyQuote)
    val titleSuggestion = stringResource(R.string.TitleHomeSuggestion)
    NavBar(
        onAccueil = true,
        currentUserVM = currentUserVM,
        currentUserState = currentUserState,
        navControllerFavorite = navFavorite,
        navControllerAccueil = { },
        navControllerProfil = navProfil,
        navControllerQuiz = navQuiz
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colorScheme.background)
        ) {
            LazyColumn(modifier = Modifier.weight(1f)) {
                item{
                    Column {
                        Text(
                            text = titleDalyQuote,
                            color = MaterialTheme.colorScheme.onBackground,
                            fontSize = 24.sp,
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(16.dp),
                            textAlign = TextAlign.Center
                        )

                        QuoteLittle(dailyQuote)
                    }
                    Text(
                        text = titleSuggestion,
                        color = MaterialTheme.colorScheme.onBackground,
                        fontSize = 24.sp,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(16.dp),
                        textAlign = TextAlign.Center
                    )
                }
                items(quotes) { quote ->

                    Column(Modifier.clickable {navQuote(quote.id)}
                    ) {
                        if(quote.language == currentUserState.langage){
                            QuoteLittle(quote)
                            Spacer(modifier = Modifier.height(16.dp))
                        }
                    }
                }
                if (itemCount < quotes.size) {
                    item {
                        LaunchedEffect(itemCount) {
                            itemCount += 15
                        }
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(16.dp),
                            contentAlignment = Alignment.Center
                        ) {
                            CircularProgressIndicator()
                        }
                    }
                }
            }
        }
    }
}
