Add theme mode selector in SettingsScreen

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/SettingsScreen.kt

@@ -2,18 +2,26 @@ package it.vfsfitvnm.vimusic.ui.screens
 
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.*
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicText
-import androidx.compose.runtime.Composable
+import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import it.vfsfitvnm.route.RouteHandler
 import it.vfsfitvnm.vimusic.R
+import it.vfsfitvnm.vimusic.enums.ColorPaletteMode
 import it.vfsfitvnm.vimusic.ui.components.TopAppBar
+import it.vfsfitvnm.vimusic.ui.components.themed.EnumValueSelectorDialog
 import it.vfsfitvnm.vimusic.ui.styling.LocalColorPalette
 import it.vfsfitvnm.vimusic.ui.styling.LocalTypography
+import it.vfsfitvnm.vimusic.utils.LocalPreferences
+import it.vfsfitvnm.vimusic.utils.secondary
 import it.vfsfitvnm.vimusic.utils.semiBold
 
 @ExperimentalAnimationApi
@@ -40,6 +48,7 @@ fun SettingsScreen() {
         host {
             val colorPalette = LocalColorPalette.current
             val typography = LocalTypography.current
+            val preferences = LocalPreferences.current
 
             Column(
                 modifier = Modifier
@@ -73,7 +82,97 @@ fun SettingsScreen() {
                             .size(24.dp)
                     )
                 }
+
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = Modifier
+                        .padding(horizontal = 16.dp, vertical = 8.dp)
+                        .background(
+                            color = colorPalette.lightBackground,
+                            shape = RoundedCornerShape(8.dp)
+                        )
+                        .padding(vertical = 8.dp)
+                        .fillMaxWidth()
+                ) {
+                    Image(
+                        painter = painterResource(R.drawable.contrast),
+                        contentDescription = null,
+                        colorFilter = ColorFilter.tint(colorPalette.text),
+                        modifier = Modifier
+                            .padding(horizontal = 16.dp, vertical = 8.dp)
+                            .size(20.dp)
+                    )
+
+                    BasicText(
+                        text = "Appearance",
+                        style = typography.m.semiBold,
+                        modifier = Modifier
+                    )
+                }
+
+                EnumValueSelectorEntry(
+                    title = "Theme mode",
+                    selectedValue = preferences.colorPaletteMode,
+                    onValueSelected = {
+                        preferences.colorPaletteMode = it
+                    },
+                    valueText = {
+                        when (it) {
+                            ColorPaletteMode.Light -> "Light"
+                            ColorPaletteMode.Dark -> "Dark"
+                            ColorPaletteMode.System -> "System"
+                        }
+                    }
+                )
             }
         }
     }
+}
+
+@Composable
+private inline fun <reified T: Enum<T>>EnumValueSelectorEntry(
+    title: String,
+    selectedValue: T,
+    crossinline onValueSelected: (T) -> Unit,
+    modifier: Modifier = Modifier,
+    crossinline valueText: (T) -> String = Enum<T>::name
+) {
+    val typography = LocalTypography.current
+
+    var isShowingDialog by remember {
+        mutableStateOf(false)
+    }
+
+    if (isShowingDialog) {
+        EnumValueSelectorDialog(
+            onDismiss = {
+                isShowingDialog = false
+            },
+            title = title,
+            selectedValue = selectedValue,
+            onValueSelected = onValueSelected,
+            valueText = valueText
+        )
+    }
+
+    Column(
+        modifier = modifier
+            .clickable(
+                indication = rememberRipple(bounded = true),
+                interactionSource = remember { MutableInteractionSource() },
+                onClick = { isShowingDialog = true }
+            )
+            .padding(horizontal = 32.dp, vertical = 8.dp)
+            .fillMaxWidth()
+    ) {
+        BasicText(
+            text = title,
+            style = typography.xs.semiBold,
+        )
+
+        BasicText(
+            text = valueText(selectedValue),
+            style = typography.xs.semiBold.secondary
+        )
+    }
 }