package org.terst.doot.widget.ui import androidx.compose.foundation.background import androidx.compose.foundation.border 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.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material3.AlertDialog import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Text import androidx.compose.material3.TextButton 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.text.input.ImeAction import androidx.compose.ui.unit.dp import org.terst.doot.widget.data.Project private val PROJECT_COLOR_CHOICES = listOf( "#3B82F6", "#EF4444", "#F59E0B", "#10B981", "#8B5CF6", "#EC4899", "#6B7280" ) /** Parses a "#RRGGBB" string into a Compose Color, defaulting to gray on failure. */ internal fun parseHexColor(hex: String): Color = runCatching { Color(android.graphics.Color.parseColor(hex)) }.getOrDefault(Color.Gray) @Composable fun ProjectPickerDialog( projects: List, onDismiss: () -> Unit, onSelect: (projectId: String) -> Unit, onClear: () -> Unit, onCreate: (name: String, color: String) -> Unit ) { var newName by remember { mutableStateOf("") } var newColor by remember { mutableStateOf(PROJECT_COLOR_CHOICES.first()) } AlertDialog( onDismissRequest = onDismiss, title = { Text("Project") }, text = { Column(verticalArrangement = Arrangement.spacedBy(4.dp)) { projects.forEach { project -> Row( modifier = Modifier .fillMaxWidth() .clickable { onSelect(project.id) } .padding(vertical = 8.dp), verticalAlignment = Alignment.CenterVertically ) { Box( modifier = Modifier .size(14.dp) .background(parseHexColor(project.color), CircleShape) ) Text(project.name, modifier = Modifier.padding(start = 10.dp)) } } Text("New project", modifier = Modifier.padding(top = 12.dp, bottom = 4.dp)) OutlinedTextField( value = newName, onValueChange = { newName = it }, singleLine = true, keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done), modifier = Modifier.fillMaxWidth() ) Row(horizontalArrangement = Arrangement.spacedBy(6.dp), modifier = Modifier.padding(top = 8.dp)) { PROJECT_COLOR_CHOICES.forEach { hex -> val isSelected = hex == newColor Box( modifier = Modifier .size(24.dp) .background(parseHexColor(hex), CircleShape) .then( if (isSelected) Modifier.border(2.dp, Color.White, CircleShape) else Modifier ) .clickable { newColor = hex } ) } } } }, confirmButton = { TextButton( onClick = { onCreate(newName, newColor) }, enabled = newName.isNotBlank() ) { Text("Create") } }, dismissButton = { Row { TextButton(onClick = onClear) { Text("Clear") } TextButton(onClick = onDismiss) { Text("Cancel") } } } ) }