package com.example.jetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.jetpackcompose.ui.theme.JetpackComposeTheme

import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Checkbox
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.RadioButton

class MainActivity10 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            JetpackComposeTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting10(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun Greeting10(modifier: Modifier = Modifier) {
    var name by remember { mutableStateOf("") }
    var surname by remember { mutableStateOf("") }
    var address by remember { mutableStateOf("") }
    var phone by remember { mutableStateOf("") }
    var city by remember { mutableStateOf("") }
    var province by remember { mutableStateOf("")  }
    var nif by remember { mutableStateOf("") }
    var cp by remember { mutableStateOf("") }
    var course by remember { mutableStateOf("") }
    var payment by remember { mutableStateOf("") }
    var selectedOptionRadio by remember { mutableStateOf("") }
    var expanded by remember { mutableStateOf(false) }
    var selectedOptionCombo by remember { mutableStateOf("Selecciona una opción") }

    var showDialog by remember { mutableStateOf(false) }
    Box(
        modifier = modifier
            .background(Color.Yellow) // Fondo azul claro
            .fillMaxSize() // Ocupa todo el tamaño disponible
            .size(200.dp) // Tamaño fijo de 200x200 dp para la caja
            .padding(16.dp), // Espaciado interno


    )
    Column(

        modifier = Modifier
            .fillMaxWidth()
            .padding(top=46.dp)
            .padding(end=12.dp)
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally

    ) {


        // Campo de entrada para el nombre
        TextField(
            value = name,
            onValueChange = { name = it },
            label = { Text("Nombre") },
            modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp)
        )
        // Campo de entrada para los apellidos
        TextField(
            value = surname,
            onValueChange = { surname = it },
            label = { Text("Apellidos") },

            modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp)
        )

        TextField(
            value = address,
            onValueChange = { address = it },
            label = { Text("Dirección") },
            modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp)
        )
        TextField(
            value = phone,
            onValueChange = { phone = it },
            label = { Text("Teléfono") },
            modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp)
        )
        TextField(
            value = city,
            onValueChange = { city = it },
            label = { Text("Ciudad") },
            modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp)
        )
        TextField(
            value = province,
            onValueChange = { province = it },
            label = { Text("Provincia") },
            modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp)
        )

        TextField(
            value = nif,
            onValueChange = { nif = it },
            label = { Text("DNI") },
            modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp)
        )
        TextField(
            value = cp,
            onValueChange = { cp = it },
            label = { Text("Codigo Postal") },
            modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp)
        )
        // Menú desplegable4



        Column {
            // Texto que muestra la opción seleccionada
            Text(
                text = selectedOptionCombo,
                modifier = Modifier
                    .fillMaxWidth() // Ocupa todo el ancho
                    .padding(8.dp) // Espaciado interno
                    .background(Color.LightGray) // Fondo gris claro
                    .clickable { expanded = true } // Abre el menú al hacer clic
            )

            // Menú desplegable
            DropdownMenu(
                expanded = expanded, // Controla si el menú está desplegado
                onDismissRequest = { expanded = false } // Cierra el menú al hacer clic fuera
            ) {
                // Opciones del menú
                val options = listOf("DAM/DAW 1", "DAM 2", "DAW 2")
                options.forEach { option ->
                    DropdownMenuItem(
                        text = { Text(option) }, // Texto de la opción
                        onClick = {
                            selectedOptionCombo = option // Actualiza la opción seleccionada
                            expanded = false // Cierra el menú después de seleccionar
                        }
                    )
                }
            }
        }

/////////////////////////////////////////////////////////////////////////

        // Componente CheckBox
        // Opción "Pagado"
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(bottom = 8.dp)
        ) {
            RadioButton(
                selected = selectedOptionRadio == "Tarjeta",
                onClick = { selectedOptionRadio = "Tarjeta" }
            )
            Text(text = "Tarjeta", modifier = Modifier.padding(start = 8.dp))
        }

        // Opción "No Pagado"
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            RadioButton(
                selected = selectedOptionRadio == "Efectivo",
                onClick = { selectedOptionRadio = "Efectivo" }
            )
            Text(text = "Efectivo", modifier = Modifier.padding(start = 8.dp))
        }
/////////////////////////////////////////////////////////////////////






        // Fila para los botones
        Row(
            modifier = Modifier.fillMaxWidth(), // La fila ocupa todo el ancho
            horizontalArrangement = Arrangement.SpaceEvenly // Distribución uniforme de los botones
        ) {
            // Botón "Aceptar"
            Button(onClick = {
                showDialog = true // Mostrar el diálogo
            }) {
                Text("Aceptar")
            }
            // Botón "Borrar"
            Button(onClick = {
                // Limpiar todos los campos
                name = ""
                surname = ""
                address = ""
                phone = ""
                city = ""
                province = ""
                nif = ""
                cp = ""
                course = ""
                payment = ""
            }) {
                Text("Borrar")
            }


        }


    }

    if (showDialog) {
        AlertDialog(
            onDismissRequest = { showDialog = false }, // Acción al cerrar el cuadro
            title = { Text("Datos Ingresados") }, // Título del diálogo
            text = {
                Text(
                    "Nombre: $name\n" +
                            "Apellidos: $surname\n" +
                            "Dirección: $address\n" +
                            "Teléfono: $phone\n" +
                            "Ciudad: $city\n" +
                            "Provincia: $province\n" +
                            "DNI: $nif\n" +
                            "Codigo Postal: $cp\n" +
                            "Curso a realizar: $selectedOptionCombo\n" +
                            "Metodo de pago: $selectedOptionRadio"
                )
            },
            confirmButton = {
                // Botón dentro del diálogo
                Button(onClick = { showDialog = false }) {
                    Text("Aceptar")
                }
            }
        )
    }
}




@Preview(showBackground = true)
@Composable
fun GreetingPreview10() {
    JetpackComposeTheme {
        Greeting10()
    }
}