package de.tsschulz.tt_tagebuch.app.ui

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.*
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import cafe.adriel.voyager.core.screen.Screen
import cafe.adriel.voyager.koin.getScreenModel
import de.tsschulz.tt_tagebuch.app.viewmodel.MemberScreenModel
import de.tsschulz.tt_tagebuch.app.viewmodel.MemberState

import cafe.adriel.voyager.navigator.LocalNavigator

class MemberScreen(private val clubId: Int) : Screen {
    @Composable
    override fun Content() {
        val navigator = LocalNavigator.current
        val viewModel = getScreenModel<MemberScreenModel>()
        val state by viewModel.state.collectAsState()

        LaunchedEffect(clubId) {
            viewModel.loadMembers(clubId)
        }

        Scaffold(
            topBar = {
                TopAppBar(title = { Text("Mitglieder") })
            },
            floatingActionButton = {
                FloatingActionButton(onClick = {
                    navigator?.push(MemberEditScreen(clubId))
                }) {
                    Icon(Icons.Default.Add, contentDescription = "Add Member")
                }
            }
        ) { padding ->
            Column(modifier = Modifier.padding(padding).fillMaxSize()) {
                when (state) {
                    is MemberState.Loading -> {
                        CircularProgressIndicator(modifier = Modifier.padding(16.dp))
                    }
                    is MemberState.Success -> {
                        val members = (state as MemberState.Success).members
                        LazyColumn {
                            items(members) { member ->
                                MemberItem(member) {
                                    navigator?.push(MemberDetailScreen(member))
                                }
                            }
                        }
                    }
                    is MemberState.Error -> {
                        Text(
                            text = (state as MemberState.Error).message,
                            color = MaterialTheme.colors.error,
                            modifier = Modifier.padding(16.dp)
                        )
                    }
                }
            }
        }
    }

    @OptIn(ExperimentalMaterialApi::class)
    @Composable
    fun MemberItem(member: de.tsschulz.tt_tagebuch.shared.models.Member, onClick: () -> Unit) {
        ListItem(
            modifier = Modifier.clickable { onClick() },
            text = { Text("${member.firstName} ${member.lastName}") },
            secondaryText = { if (!member.active) Text("Inaktiv", color = MaterialTheme.colors.error) }
        )
        Divider()
    }

}
