package com.example.jtcomposeview.ui.activities

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.RadioButton
import androidx.compose.material3.RadioButtonDefaults
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.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
import coil.request.ImageRequest
import coil.size.Scale
import com.example.jtcomposeview.ui.activities.ui.theme.JtComposeViewTheme
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

val images = listOf<String>(
    "https://ts1.cn.mm.bing.net/th/id/R-C.5c8f29ad51f34d3b0adc3afdb291df93?rik=%2bhG3H5kH6s4iDA&riu=http%3a%2f%2fpic.zsucai.com%2ffiles%2f2013%2f0716%2fpgjlg3.jpg&ehk=6C%2bwmXLxbeNFL6yxRnn1FEwx%2fLA50Y%2f3aisA53qH%2foQ%3d&risl=&pid=ImgRaw&r=0",
    "https://ts1.cn.mm.bing.net/th/id/R-C.84291087968fbc9e882d32bb4486515f?rik=E7LGR3IVaSRfwA&riu=http%3a%2f%2fwww.33lc.com%2farticle%2fUploadPic%2f2012-8%2f2012849261381266.jpg&ehk=c9FedHL6SnoO61VDA8mKdvoadeswlhaJkULuq9iFgDc%3d&risl=&pid=ImgRaw&r=0",
    "https://ts1.cn.mm.bing.net/th/id/R-C.15e970cd0765096178a6da16993cfbb1?rik=IT5KfevidZcTig&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1210%2f22%2fc0%2f14558824_1350879506501.jpg&ehk=X9ro%2fg%2fGTmsglVrbV%2bmy8c3wsAvcHseqcEhsf80RMWA%3d&risl=&pid=ImgRaw&r=0",
    "https://ts1.cn.mm.bing.net/th/id/R-C.5c8f29ad51f34d3b0adc3afdb291df93?rik=%2bhG3H5kH6s4iDA&riu=http%3a%2f%2fpic.zsucai.com%2ffiles%2f2013%2f0716%2fpgjlg3.jpg&ehk=6C%2bwmXLxbeNFL6yxRnn1FEwx%2fLA50Y%2f3aisA53qH%2foQ%3d&risl=&pid=ImgRaw&r=0"
)

class CarouselActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JtComposeViewTheme {
                Banner()
            }
        }
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun Banner() {
    val pageState = rememberPagerState(initialPage = 0, initialPageOffsetFraction = 0F) {
        images.size
    }
    val scope = rememberCoroutineScope()
    Box() {
        LaunchedEffect(pageState.settledPage) {
            delay(1500)
            if (pageState.currentPage + 2 == images.size) {
                pageState.animateScrollToPage(pageState.currentPage + 1)
                pageState.scrollToPage(0)
            } else {
                pageState.animateScrollToPage(pageState.currentPage + 1)
            }

        }
        HorizontalPager(
            state = pageState,
            modifier = Modifier
                .height(180.dp)
                .padding(top = 15.dp),

            ) { index ->
            AsyncImage(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(horizontal = 10.dp)
                    .clip(RoundedCornerShape(10.dp)),
                model = ImageRequest
                    .Builder(LocalContext.current)
                    .data(images[index])
                    .scale(Scale.FILL)
                    .build(),
                contentDescription = "圖片$index",
                contentScale = ContentScale.FillBounds
            )
        }
        Row(
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(bottom = 5.dp)
        )
        {
            (0..images.size - 2).forEach { radioIndex ->
                RadioButton(
                    colors = RadioButtonDefaults.colors(
                        selectedColor = Color.Green,
                        unselectedColor = Color.White
                    ),
                    // 添加后面的一段是為了讓最后一頁和第一頁過度更加平滑
                    selected = (pageState.currentPage == radioIndex || (radioIndex == 0 && pageState.currentPage == images.size - 1)),
                    onClick = {
                        scope.launch {
                            if (radioIndex == 0) {
                                pageState.animateScrollToPage(images.size - 1)
                                pageState.scrollToPage(0)
                            } else {
                                pageState.animateScrollToPage(radioIndex)
                            }
                        }
                    }
                )
            }
        }
    }
}