package com.zaojiao.app.feat.home.course

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.zaojiao.app.feat.design.Screen
import com.zaojiao.app.feat.design.StatePage
import com.zaojiao.app.feat.design.UiState
import com.zaojiao.app.feat.design.grid

@Composable
internal fun HomeCourseRoute(
    viewModel: HomeCourseViewModel = hiltViewModel(),
) {
    HomeCoursePage()
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HomeCoursePage() {
    Surface(
        color = Color.White,
        modifier = Modifier.fillMaxSize(),
    ) {
        val width = Screen.width()

        StatePage(uiState = UiState.Loading) {
            LazyColumn(
                modifier = Modifier.fillMaxWidth()
            ) {
                stickyHeader {
                    HomeCourseTopBar()
                }

                item {
                    HomeCourseTopSwiper()
                }

                item {
                    val itemWidth = (width - 112.dp) / 5
                    HomeCourseCategory(itemWidth)
                }

                item {
                    HomeCourseZone()
                }

                item {
                    HomeCourseGroupBuy()
                }

                item {
                    HomeCourseRecommend()
                }

                grid(
                    count = 100,
                    span = 2,
                    hSpace = 12.dp,
                    vSpace = 20.dp,
                    padding = 16.dp,
                    isVertical = true,
                ) {
                    HomeCourseRecommendItem()
                }
            }
        }
    }
}