package com.zaojiao.app.feat.home.index

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.zaojiao.app.feat.design.StatePage
import com.zaojiao.app.feat.design.grid
import com.zaojiao.app.feat.design.list
import com.zaojiao.app.feat.home.index.state.HomeIndexBabyUiState
import com.zaojiao.app.feat.home.index.state.HomeIndexPageUiState


@Composable
internal fun HomeIndexRoute(
    viewModel: HomeIndexViewModel = hiltViewModel(),
) {
    val babyUiState by viewModel.babyUiState.collectAsStateWithLifecycle()
    val indexUiState by viewModel.stateFlow.collectAsStateWithLifecycle()

    StatePage(uiState = indexUiState) {
        HomeIndexPage(
            babyUiState = babyUiState,
            indexUiState = this,
            onBabyInfoClick = { }
        )
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HomeIndexPage(
    babyUiState: HomeIndexBabyUiState,
    indexUiState: HomeIndexPageUiState,
    onBabyInfoClick: () -> Unit,
) {
    LazyColumn(
        modifier = Modifier
            .background(color = Color(0xFFFBFCFD))
            .statusBarsPadding()
            .fillMaxSize(),
    ) {
        stickyHeader {
            HomeIndexTopBar(
                babyUiState = babyUiState,
                onBabyInfoClick = onBabyInfoClick,
            )
        }

        item {
            HomeIndexSwiper(
                list = indexUiState.bannerList,
            )
        }

        item {
            HomeIndexActionBar()
        }

        item {
            HomeIndexSwiper2(
                list = indexUiState.bannerList,
                )
        }

        item {
            HomeIndexTopic()
        }

        item {
            HomeIndexAudio()
        }

        item {
            HomeIndexCourse()
        }

        list(
            count = 5,
            itemContent = { index -> HomeIndexCourseRecommendItem() },
            itemSeparation = { index -> Box(modifier = Modifier.height(16.dp)) }
        )

        item {
            Box(modifier = Modifier.height(20.dp))
        }

        item {
            HomeIndexGood()
        }

        grid(
            count = 10,
            span = 2,
            hSpace = 13.dp,
            vSpace = 13.dp,
            padding = 16.dp,
            isVertical = true,
        ) { index ->
            HomeIndexGoodRecommendItem()
        }

        item {
            Box(modifier = Modifier.height(40.dp))
        }
    }
}