package main

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import main.component.buttonComponent

@Composable
fun HelpPage(onBackClick: () -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Besoin d'aide ?", style = MaterialTheme.typography.h4)

        // Utilisation de Row pour aligner les trois Box
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            // Première Box (image et texte)
            Box(
                modifier = Modifier
                    .weight(1f)
                    .padding(16.dp),
                contentAlignment = Alignment.Center
            ) {
                // Image au centre
                Image(
                    painter = painterResource("glossimg.png"),
                    contentDescription = "Image glossaire",
                    modifier = Modifier
                        .size(150.dp)
                )

                // Texte en dessous de l'image
                Text(
                    " \n \n" + "Permet de créer un projet \n" +
                            "avec des glossaires \n" +
                            "et d'ajouter des mots au(x) glossaire(s)",
                    modifier = Modifier
                        .align(Alignment.BottomCenter)
                )
            }

            // Espacement entre les deux premières Box
            Spacer(modifier = Modifier.width(16.dp))

            // Deuxième Box (deuxième image et texte)
            Box(
                modifier = Modifier
                    .weight(1f)
                    .padding(16.dp),
                contentAlignment = Alignment.Center
            ) {
                // Deuxième image au centre
                Image(
                    painter = painterResource("code.png"),
                    contentDescription = "Image code",
                    modifier = Modifier
                        .size(150.dp)
                )

                // Deuxième texte en dessous de l'image
                Text(
                    "Permet d'ajouter le code \n" +
                            "source que vous souhaitez vérifier",
                    modifier = Modifier
                        .align(Alignment.BottomCenter)
                )
            }

            // Espacement entre la deuxième et la troisième Box
            Spacer(modifier = Modifier.width(16.dp))

            // Troisième Box (troisième image et texte)
            Box(
                modifier = Modifier
                    .weight(1f)
                    .padding(16.dp),
                contentAlignment = Alignment.Center
            ) {
                // Troisième image au centre
                Image(
                    painter = painterResource("comparer.png"),
                    contentDescription = "Image comparaison",
                    modifier = Modifier
                        .size(150.dp)
                )

                // Troisième texte en dessous de l'image
                Text(
                    "Permet de comparer votre glossaire \n" +
                            "avec votre code source",
                    modifier = Modifier
                        .align(Alignment.BottomCenter)
                )
            }
        }

        Spacer(modifier = Modifier.height(160.dp))

        buttonComponent("OK", onBackClick)
    }
}



@Composable
fun HelpButton(onHelpClick: () -> Unit) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        contentAlignment = Alignment.BottomEnd
    ) {
        IconButton(
            onClick = onHelpClick
        ) {
            Text("?", fontSize = 24.sp)
        }
    }
}
