Merge "[TP] Update the clock section title" into tm-qpr-dev
diff --git a/res/layout/clock_section_view.xml b/res/layout/clock_section_view.xml
index dfd015e..31f08fc 100644
--- a/res/layout/clock_section_view.xml
+++ b/res/layout/clock_section_view.xml
@@ -33,14 +33,13 @@
         <TextView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:text="@string/clock_settings_title"
+            android:text="@string/clock_color_and_size_title"
             style="@style/SectionTitleTextStyle" />
 
         <TextView
-            android:id="@+id/selected_clock_text"
+            android:id="@+id/selected_clock_color_and_size"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:text="@string/clock_description"
             style="@style/SectionSubtitleTextStyle"/>
     </LinearLayout>
 
diff --git a/res/values/strings.xml b/res/values/strings.xml
index c1bdc54..3bd9e84 100755
--- a/res/values/strings.xml
+++ b/res/values/strings.xml
@@ -36,6 +36,12 @@
     <!-- Title of a section of the customization picker where the user can configure Clock face. [CHAR LIMIT=19] -->
     <string name="clock_settings_title">Clock Settings</string>
 
+    <!-- Title of a section of the customization picker where the user can configure clock color and size. [CHAR LIMIT=20] -->
+    <string name="clock_color_and_size_title">Clock color &amp; size</string>
+
+    <!-- Description of a section of the customization picker where the user can configure clock color and size, e.g. Violet, small. [CHAR LIMIT=NONE] -->
+    <string name="clock_color_and_size_description"><xliff:g name="color">%1$s</xliff:g>, <xliff:g name="size">%2$s</xliff:g></string>
+
     <!-- Title of a tab to change the clock color. [CHAR LIMIT=15] -->
     <string name="clock_color">Color</string>
 
diff --git a/src/com/android/customization/module/ThemePickerInjector.kt b/src/com/android/customization/module/ThemePickerInjector.kt
index 1ed9f87..3d02c84 100644
--- a/src/com/android/customization/module/ThemePickerInjector.kt
+++ b/src/com/android/customization/module/ThemePickerInjector.kt
@@ -311,7 +311,7 @@
 
     override fun getClockSectionViewModel(context: Context): ClockSectionViewModel {
         return clockSectionViewModel
-            ?: ClockSectionViewModel(getClockPickerInteractor(context)).also {
+            ?: ClockSectionViewModel(context, getClockPickerInteractor(context)).also {
                 clockSectionViewModel = it
             }
     }
diff --git a/src/com/android/customization/picker/clock/ui/binder/ClockSectionViewBinder.kt b/src/com/android/customization/picker/clock/ui/binder/ClockSectionViewBinder.kt
index 5a3286d..7dc0d0c 100644
--- a/src/com/android/customization/picker/clock/ui/binder/ClockSectionViewBinder.kt
+++ b/src/com/android/customization/picker/clock/ui/binder/ClockSectionViewBinder.kt
@@ -21,8 +21,8 @@
 import android.widget.TextView
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleOwner
-import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
+import androidx.lifecycle.repeatOnLifecycle
 import com.android.customization.picker.clock.ui.viewmodel.ClockSectionViewModel
 import com.android.wallpaper.R
 import kotlinx.coroutines.flow.collectLatest
@@ -37,14 +37,17 @@
     ) {
         view.setOnClickListener { onClicked() }
 
-        val selectedClockTextView: TextView = view.requireViewById(R.id.selected_clock_text)
+        val selectedClockColorAndSize: TextView =
+            view.requireViewById(R.id.selected_clock_color_and_size)
 
         lifecycleOwner.lifecycleScope.launch {
-            viewModel.selectedClockName
-                .flowWithLifecycle(lifecycleOwner.lifecycle, Lifecycle.State.STARTED)
-                .collectLatest { selectedClockName ->
-                    selectedClockTextView.text = selectedClockName
+            lifecycleOwner.repeatOnLifecycle(Lifecycle.State.STARTED) {
+                launch {
+                    viewModel.selectedClockColorAndSizeText.collectLatest {
+                        selectedClockColorAndSize.text = it
+                    }
                 }
+            }
         }
     }
 }
diff --git a/src/com/android/customization/picker/clock/ui/viewmodel/ClockSectionViewModel.kt b/src/com/android/customization/picker/clock/ui/viewmodel/ClockSectionViewModel.kt
index 26fbf63..9239c0a 100644
--- a/src/com/android/customization/picker/clock/ui/viewmodel/ClockSectionViewModel.kt
+++ b/src/com/android/customization/picker/clock/ui/viewmodel/ClockSectionViewModel.kt
@@ -16,12 +16,31 @@
  */
 package com.android.customization.picker.clock.ui.viewmodel
 
+import android.content.Context
 import com.android.customization.picker.clock.domain.interactor.ClockPickerInteractor
+import com.android.customization.picker.clock.shared.ClockSize
+import com.android.wallpaper.R
+import java.util.Locale
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.map
 
 /** View model for the clock section view on the lockscreen customization surface. */
-class ClockSectionViewModel(interactor: ClockPickerInteractor) {
-
-    val selectedClockName: Flow<String> = interactor.selectedClock.map { it.name }
+class ClockSectionViewModel(context: Context, interactor: ClockPickerInteractor) {
+    val appContext: Context = context.applicationContext
+    val selectedClockColorAndSizeText: Flow<String> =
+        interactor.selectedClockSize.map { selectedClockSize ->
+            // TODO (b/241966062) Finalize the colors and their names
+            val colorText = "Violet"
+            val sizeText =
+                when (selectedClockSize) {
+                    ClockSize.SMALL -> appContext.getString(R.string.clock_size_small)
+                    ClockSize.DYNAMIC -> appContext.getString(R.string.clock_size_dynamic)
+                }
+            appContext
+                .getString(R.string.clock_color_and_size_description, colorText, sizeText)
+                .lowercase()
+                .replaceFirstChar {
+                    if (it.isLowerCase()) it.titlecase(Locale.getDefault()) else it.toString()
+                }
+        }
 }
diff --git a/tests/src/com/android/customization/testing/TestCustomizationInjector.kt b/tests/src/com/android/customization/testing/TestCustomizationInjector.kt
index 2a2ab5e..98cbe68 100644
--- a/tests/src/com/android/customization/testing/TestCustomizationInjector.kt
+++ b/tests/src/com/android/customization/testing/TestCustomizationInjector.kt
@@ -162,7 +162,7 @@
 
     override fun getClockSectionViewModel(context: Context): ClockSectionViewModel {
         return clockSectionViewModel
-            ?: ClockSectionViewModel(getClockPickerInteractor(context)).also {
+            ?: ClockSectionViewModel(context, getClockPickerInteractor(context)).also {
                 clockSectionViewModel = it
             }
     }