package com.aiosman.riderpro

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.material3.ScrollableTabRow
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
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.graphics.Path
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun GalleryPage() {
    val pagerState = rememberPagerState(pageCount = { 2 })
    val scope = rememberCoroutineScope()
    fun switchToPage(page: Int) {
        scope.launch {
            pagerState.animateScrollToPage(page)
        }
    }
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text("Gallery")
                },
                navigationIcon = { },
                actions = { })
        },
    ) { paddingValues: PaddingValues ->
        Box(modifier = Modifier.padding(paddingValues)) {
            Column(modifier = Modifier) {
                ScrollableTabRow(
                    edgePadding = 0.dp,
                    selectedTabIndex = pagerState.currentPage,
                    modifier = Modifier,
                    divider = { },
                    indicator = { tabPositions ->
                        Box(
                            modifier = Modifier
                                .tabIndicatorOffset(tabPositions[pagerState.currentPage])

                        ) {
                            Box(
                                modifier = Modifier
                                    .align(Alignment.Center)
                                    .height(4.dp)
                                    .width(16.dp)
                                    .background(color = Color.Red)

                            )
                        }
                    }
                ) {
                    Tab(
                        text = { Text("Timeline", color = Color.Black) },
                        selected = pagerState.currentPage == 0,
                        onClick = { switchToPage(0) }

                    )
                    Tab(
                        text = { Text("Position", color = Color.Black) },
                        selected = pagerState.currentPage == 1,
                        onClick = { switchToPage(1) }
                    )
                }
                HorizontalPager(
                    state = pagerState,
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxSize()
                ) { page ->
                    when (page) {
                        0 -> GalleryTimeline()
                        1 -> GalleryPosition()
                    }
                }
            }
        }

    }
}
@Composable
fun GalleryTimeline() {
    val mockList = listOf("1", "2", "3", "4", "5", "6", "7", "8", "9", "10")
    Box(
        modifier = Modifier
            .fillMaxSize()
    ) {
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
        ) {
            items(mockList) { item ->
                TimelineItem()
            }

        }
    }

}
@Composable
fun DashedVerticalLine(modifier: Modifier = Modifier) {
    BoxWithConstraints(modifier = modifier) {
        Canvas(modifier = Modifier.height(maxHeight)) {
            val path = Path().apply {
                moveTo(size.width / 2, 0f)
                lineTo(size.width / 2, size.height)
            }
            drawPath(
                path = path,
                color = Color.Gray,
            )
        }
    }
}
@Preview
@Composable
fun TimelineItem() {
    val itemsList = listOf("1", "2", "3", "4", "5", "6", "7", "8", "9")
    Box(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxSize()
            .wrapContentWidth()

    ) {
        Row(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth()
        ) {
            Column(
                modifier = Modifier
                    .width(64.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text("12", fontSize = 22.sp, fontWeight = androidx.compose.ui.text.font.FontWeight.Bold)
                Text("7月", fontSize = 20.sp,fontWeight = androidx.compose.ui.text.font.FontWeight.Bold)
                // add vertical dash line
                Box(
                    modifier = Modifier
                        .height(120.dp)
                        .width(3.dp)
                        .background(Color.Gray)
                )
            }
            Column {
                Row(
                    modifier = Modifier
                        .padding(bottom = 16.dp)
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.default_avatar),
                        contentDescription = "",
                        modifier = Modifier
                            .padding(end = 16.dp)
                            .size(24.dp)
                            .clip(CircleShape) // Clip the image to a circle
                    )
                    Text("Onyama Limba")
                }
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .aspectRatio(1f)
                ) {
                    Column {
                        repeat(3) { // Create three rows
                            Row(modifier = Modifier.weight(1f)) {
                                repeat(3) { // Create three columns in each row
                                    Box(
                                        modifier = Modifier
                                            .weight(1f)
                                            .aspectRatio(1f) // Keep the aspect ratio 1:1 for square shape
                                            .padding(4.dp)
                                    ){
                                        Box(
                                            modifier = Modifier
                                                .fillMaxSize()
                                                .background(Color.Gray)
                                        ) {
                                            Text("1")
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun GalleryPosition() {
    val mockList = listOf("1", "2", "3", "4", "5", "6", "7", "8", "9", "10")
    Box(
        modifier = Modifier
            .fillMaxSize()
    ) {
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
        ) {
            items(mockList) { item ->
                TimelineItem()
            }

        }
    }
}