@Composable
fun PlayScreen() {
   data class User(val id: Int) {
      var firstName by mutableStateOf("")
      var lastName by mutableStateOf("")

      constructor(id: Int, first: String, last: String) : this(id) {
         firstName = first
         lastName = last
      }
   }

   var users = remember {
      mutableStateMapOf(
         1 to User(1, "Luke", "Skywalker"),
         2 to User(2, "C3", "PO"),
         3 to User(3, "Boba", "Fett")
      )
   }
   var sortOnFirst by remember { mutableStateOf(true) }
   val sortedUsers by remember { derivedStateOf { users.values.sortedBy { user -> if (sortOnFirst) user.firstName else user.lastName } } }
   Column {
      LazyColumn(
         modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally
      ) {
         items(items = sortedUsers, key = { user -> user.id }) { user ->
            Button(
               onClick = {
                  user.firstName = user.firstName.reversed()
                  user.lastName = user.lastName.reversed()
               }, colors = ButtonDefaults.buttonColors(
                  containerColor = Color.hsv(
                     user.id.toFloat() / sortedUsers.size.toFloat() * 360, 1f, 1f
                  )
               )
            ) {
               Text(text = "${user.lastName}, ${user.firstName}")
            }
         }
      }
      Row(verticalAlignment = Alignment.CenterVertically) {
         Checkbox(checked = sortOnFirst, onCheckedChange = { sortOnFirst = !sortOnFirst })
         Text(text = "By First Name")
      }
      Button(onClick = { users[4] = User(4, "Han", "Solo") }) {
         Text(text = "Add")
      }
   }
}