package com.example.mathseduc.ui


import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.material3.Button
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import com.example.mathseduc.controllers.ControllerChapter
import com.example.mathseduc.ui.theme.Colors

@Composable
fun CreateLobbyPage() {
    var lobbyName by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    var nbPlayers by remember { mutableStateOf("") }
    var difficulty by remember { mutableStateOf("") }
    var chapter by remember { mutableStateOf("") }
    var expandedDifficulty by remember { mutableStateOf(false) }
    var expandedChapter by remember { mutableStateOf(false) }
    var sizeDifficulty by remember { mutableStateOf(IntSize.Zero) }
    var sizeChapter by remember { mutableStateOf(IntSize.Zero) }

    val context = LocalContext.current
    val keyboardController = LocalSoftwareKeyboardController.current

    Column(

        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
            .background(Colors.Black)
    ) {
        TextField(
            value = lobbyName,
            onValueChange = { lobbyName = it },
            modifier = Modifier
                .fillMaxWidth()
                .background(Colors.White)
                .padding(8.dp),
            label = { Text("Lobby Name") }
        )


        TextField(
            value = password,
            onValueChange = { password = it },
            modifier = Modifier
                .fillMaxWidth()
                .background(Colors.White)
                .padding(8.dp),
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation(),
            keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Password)
        )


        TextField(
            value = nbPlayers,
            onValueChange = { nbPlayers = it },
            modifier = Modifier
                .fillMaxWidth()
                .background(Colors.White)
                .padding(8.dp),
            label = { Text("Number of Players") },
            keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number)
        )


        Box {
            val difficultyOptions = listOf("Facile", "Moyen", "Difficile")
            TextField(
                value = difficulty,
                onValueChange = { difficulty = it },
                readOnly = true,
                enabled = false,
                colors = TextFieldDefaults.colors(
                    disabledTextColor = Colors.Black,
                    disabledLabelColor = Colors.Black,
                    disabledTrailingIconColor = Colors.Black,
                    disabledIndicatorColor = Color.Black
                ),
                modifier = Modifier
                    .clickable(onClick = {
                        expandedDifficulty = !expandedDifficulty
                    })
                    .onGloballyPositioned {
                        sizeDifficulty = it.size
                    }
                    .fillMaxWidth()
                    .background(Colors.White)
                    .padding(8.dp),
                label = { Text("Difficulté") },
                trailingIcon = {
                    Icon(
                        Icons.Default.ArrowDropDown,
                        contentDescription = null,
                        Modifier.clickable {
                            expandedDifficulty = !expandedDifficulty
                        }
                    )
                }
            )
            DropdownMenu(
                expanded = expandedDifficulty,
                onDismissRequest = { expandedDifficulty = false },
                modifier = Modifier
                    .width(with(LocalDensity.current) { sizeDifficulty.width.toDp() })
                    .background(Colors.White)
                    .padding(8.dp)
            ) {
                difficultyOptions.forEach { option ->
                    DropdownMenuItem(
                        text = { Text(option, color = Colors.Black) },
                        onClick = {
                            difficulty = option
                            expandedDifficulty = false
                            keyboardController?.hide()
                        }
                    )
                }
            }
        }


        Box {
            val chapterOptions = ControllerChapter.getChapters()
            TextField(
                value = chapter,
                onValueChange = { chapter = it },
                readOnly = true,
                enabled = false,
                colors = TextFieldDefaults.colors(
                    disabledTextColor = Colors.Black,
                    disabledLabelColor = Colors.Black,
                    disabledTrailingIconColor = Colors.Black,
                    disabledIndicatorColor = Color.Black
                ),
                modifier = Modifier
                    .clickable(onClick = {
                        expandedChapter = !expandedChapter
                    })
                    .onGloballyPositioned {
                        sizeChapter = it.size
                    }
                    .fillMaxWidth()
                    .background(Colors.White)
                    .padding(8.dp),
                label = { Text("Chapitre") },
                trailingIcon = {
                    Icon(
                        Icons.Default.ArrowDropDown,
                        contentDescription = null,
                        Modifier.clickable {
                            expandedChapter = !expandedChapter
                        }
                    )
                }
            )
            DropdownMenu(
                expanded = expandedChapter,
                onDismissRequest = { expandedChapter = false },
                modifier = Modifier
                    .background(Colors.White)
                    .padding(8.dp)
            ) {

                chapterOptions?.forEach { option ->
                    DropdownMenuItem(
                        text = { Text(option.name, color = Colors.Black) },
                        onClick = {
                            chapter = option.name
                            expandedChapter = false
                            keyboardController?.hide()
                        }
                    )
                }
            }
        }

        Button(
            onClick = {
                // Handle button click (Create Lobby)
                // Use the collected data: lobbyName, password, nbPlayers, difficulty, chapter
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)
        ) {
            Text(text = "Create Lobby", color = Colors.White)
        }
    }

}



