package com.mitchelbv.thuis_c.ui.feyenoord

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import coil.compose.AsyncImage
import com.mitchelbv.thuis_c.R

@Composable
fun FeyenoordScreen(feyenoordViewModel: FeyenoordViewModel = viewModel()) {
    val feyenoordUiState by feyenoordViewModel.uiState.collectAsState()
    Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())
//            .padding(16.dp)
    ) {
        MatchList(matches = feyenoordUiState.matches, Modifier)
    }
}

@Composable
fun MatchList(matches: List<Match>, modifier: Modifier) {
    return Column {
        matches.forEach {
            MatchCard(match = it, modifier)
        }
    }
}

@Composable
fun TeamNameWithLogo(team_name: String, team_logo_url: String, modifier: Modifier) {
    Column(modifier = modifier.size(128.dp).fillMaxWidth(), Arrangement.Center, Alignment.CenterHorizontally) {
        AsyncImage(
            model = team_logo_url,
            contentDescription = team_name,
            placeholder = painterResource(id = R.drawable.ic_launcher_foreground),
            contentScale = ContentScale.Fit,
            modifier = modifier.size(64.dp)
        )
        Text(text = team_name, modifier = modifier.fillMaxWidth().wrapContentWidth(Alignment.CenterHorizontally))
    }

}

@Composable
fun MatchCard(match: Match, modifier: Modifier) {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically,
        modifier = modifier
            .fillMaxWidth()
            .padding(8.dp)
            .height(128.dp)
    ) {
        TeamNameWithLogo(
            team_name = match.home_team,
            team_logo_url = match.home_image,
            modifier = modifier
        )
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            Text(text = match.date, overflow = TextOverflow.Ellipsis)
            Row {
                Text(match.begin_time)
                Text(" - ")
                Text(match.end_time)
            }
        }
        TeamNameWithLogo(
            team_name = match.away_team,
            team_logo_url = match.away_image,
            modifier = modifier
        )

    }
}

@Preview(showBackground = true)
@Composable
fun PreviewMatchCard() {
    val test = Match(
        home_image = "https://tymes4-cdn.azureedge.net/feyenoord/21-feyenoord-logo-original.png",
        away_image = "https://tymes4-cdn.azureedge.net/feyenoord/291-S.S._Lazio_badge.svg-min-original.png",
        home_team = "Feyenoord Vrouwen 1",
        away_team = "FC Twente Vrouwen 1",
        date = "do 03 November 2023",
        begin_time = "18:03",
        end_time = "20:03"
    )
    MatchCard(match = test, Modifier)
}