package moe.lava.neon.ui.screens.members

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.plus
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SegmentedListItem
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import moe.lava.neon.ui.util.ThemedPreview

data class MembersListModel(
    val members: List<Member>,
) {
    data class Member(
        val avatar: String,
        val name: String,
        val status: String?,
    )
}

val sampleModel = MembersListModel(
    listOf(
        MembersListModel.Member("", "Mem1", "Something?"),
        MembersListModel.Member("", "Mem2", null),
        MembersListModel.Member("", "Mem4", "Bleh"),
        MembersListModel.Member("", "Mem8", null),
        MembersListModel.Member("", "Mem7", null),
    )
)

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun MembersList(
    model: MembersListModel = sampleModel,
) {
    Scaffold(

    ) { contentPadding ->
        Box(
            Modifier.fillMaxSize()
                .padding(contentPadding.plus(PaddingValues(16.dp)))
        ) {
            Column(
                modifier = Modifier.verticalScroll(rememberScrollState()),
                verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap)
            ) {
                model.members.forEachIndexed { idx, member ->
                    MemberEntry(member, idx, model.members.size)
                }
                Spacer(Modifier.height(10.dp))
                model.members.forEachIndexed { idx, member ->
                    MemberEntry(member, idx, model.members.size)
                }
                Spacer(Modifier.height(10.dp))
                model.members.forEachIndexed { idx, member ->
                    MemberEntry(member, idx, model.members.size)
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun MemberEntry(
    model: MembersListModel.Member,
    index: Int,
    size: Int,
) {
    val colors = ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
    SegmentedListItem(
        onClick = {},
        colors = colors,
        leadingContent = { },
        supportingContent = {
            model.status?.let { Text(it) }
        },
        shapes = ListItemDefaults.segmentedShapes(index, size)
    ) {
        Text(
            text = model.name,
            style = MaterialTheme.typography.bodyLarge,
        )
    }
}

@Preview
@Composable
fun MembersListPreview() {
    ThemedPreview {
        MembersList()
    }
}
