Merge pull request #117 from teamtuna/EMOTION-90

Emotion 90  달력 다이얼로그 추가

Author: pennya

presentation/src/main/java/com/teamtuna/emotionaldiary/compose/calendar/CalendarComposeApp.kt

@@ -10,14 +10,16 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.AlertDialog
-import androidx.compose.material.Button
+import androidx.compose.material.Card
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -29,12 +31,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.window.Dialog
 import be.sigmadelta.calpose.Calpose
 import be.sigmadelta.calpose.WEIGHT_7DAY_WEEK
 import be.sigmadelta.calpose.model.CalposeActions
@@ -45,29 +48,39 @@ import be.sigmadelta.calpose.widgets.MaterialHeader
 import coil.compose.rememberImagePainter
 import coil.transform.CircleCropTransformation
 import com.google.accompanist.insets.ProvideWindowInsets
+import com.google.accompanist.insets.statusBarsHeight
 import com.teamtuna.emotionaldiary.compose.theme.EmotionalDiaryTheme
 import org.threeten.bp.DayOfWeek
 import org.threeten.bp.YearMonth
 
 @Preview
 @Composable
 fun CalendarComposeApp() {
+    val appBarColor = MaterialTheme.colors.surface.copy(alpha = 0.87f)
+
     EmotionalDiaryTheme {
         ProvideWindowInsets {
             Column {
-                Spacer(modifier = Modifier.height(100.dp))
+                Spacer(
+                    modifier = Modifier
+                        .background(appBarColor)
+                        .fillMaxWidth()
+                        .statusBarsHeight()
+                )
                 MaterialPreview()
             }
         }
     }
 }
 
-@Preview("MaterialPreview")
 @Composable
 fun MaterialPreview() {
     var month by remember { mutableStateOf(YearMonth.now()) }
     var selectionSet by remember { mutableStateOf(setOf<CalposeDate>()) }
     val (showDialog, setShowDialog) = remember { mutableStateOf(false) }
+    var currentDate by remember {
+        mutableStateOf(CalposeDate(-1, DayOfWeek.MONDAY, YearMonth.now()))
+    }
 
     MaterialCalendar(
         month = month,
@@ -76,15 +89,27 @@ fun MaterialPreview() {
             onClickedPreviousMonth = { month = month.minusMonths(1) },
             onClickedNextMonth = { month = month.plusMonths(1) },
         ),
-        onSelected = {
-            selectionSet = mutableSetOf(it).apply {
+        onSelected = { calPoseDate ->
+            selectionSet = mutableSetOf(calPoseDate).apply {
+                currentDate = calPoseDate
                 setShowDialog(true)
                 addAll(selectionSet)
             }
         }
     )
 
-    EmotionDialog(showDialog, setShowDialog)
+    EmotionListDialog(
+        showDialog,
+        setShowDialog,
+        currentDate,
+        onDismiss = {
+            // dialog 없어진 후 작업이 필요할 경
+        },
+        onEmotionClick = { calposeDate, emotionId ->
+            // newIntent 작업한 곳으로 보내기
+            // 날짜, emotion Id 값이 보내져아함
+        }
+    )
 }
 
 @Composable
@@ -106,6 +131,7 @@ fun MaterialCalendar(
             day = { dayDate, todayDate ->
                 Day(
                     dayDate = dayDate,
+                    todayDate = todayDate,
                     selectionSet = selectionSet,
                     onSelected = onSelected
                 )
@@ -139,32 +165,35 @@ fun HeaderDayRow(
 @Composable
 fun RowScope.Day(
     dayDate: CalposeDate,
+    todayDate: CalposeDate,
     selectionSet: Set<CalposeDate>,
     onSelected: (CalposeDate) -> Unit
 ) {
+    val isToday = todayDate == dayDate
     val isSelected = selectionSet.contains(dayDate)
-    val weight = WEIGHT_7DAY_WEEK
-    val bgColor = if (isSelected) Color(primaryAccent) else Color.Transparent
+    val bgColor = when {
+        isSelected -> Color(primaryAccent)
+        isToday -> Color(todayColor)
+        else -> Color.Transparent
+    }
 
     val widget: @Composable () -> Unit = {
         EmotionDay(
             text = dayDate.day.toString(),
-            modifier = Modifier
-                .padding(4.dp)
-                .weight(weight)
-                .fillMaxWidth(),
             style = TextStyle(
                 color = when {
-                    isSelected -> Color.White
+                    isSelected || isToday -> Color.White
                     else -> Color.Black
                 },
-                fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Normal
+                fontWeight = if (isSelected || isToday) FontWeight.Bold else FontWeight.Normal
             )
         )
     }
 
     Column(
-        modifier = Modifier.weight(WEIGHT_7DAY_WEEK),
+        modifier = Modifier
+            .weight(WEIGHT_7DAY_WEEK)
+            .padding(4.dp),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
@@ -200,21 +229,19 @@ fun RowScope.PriorMonthDay(
 @Composable
 fun EmotionDay(
     text: String,
-    modifier: Modifier = Modifier.padding(4.dp),
     style: TextStyle = TextStyle()
 ) {
-    val ctx = LocalContext.current
-    val maxSize = 50.dp
     val url = "https://upload.wikimedia.org/wikipedia/commons/thumb/" +
         "e/e6/Noto_Emoji_KitKat_263a.svg/1200px-Noto_Emoji_KitKat_263a.svg.png"
 
     Column(
         verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally
     ) {
         Text(
             text,
-            modifier = modifier,
+            Modifier
+                .padding(4.dp)
+                .fillMaxWidth(),
             textAlign = TextAlign.Center,
             style = style
         )
@@ -227,48 +254,85 @@ fun EmotionDay(
             ),
             contentDescription = null,
             modifier = Modifier
-                .weight(WEIGHT_7DAY_WEEK)
-                .size(maxSize)
+                .fillMaxWidth()
+                .fillMaxHeight()
         )
     }
 }
 
 @Composable
-fun EmotionDialog(showDialog: Boolean, setShowDialog: (Boolean) -> Unit) {
-    if (showDialog) {
-        AlertDialog(
-            onDismissRequest = {
-            },
-            title = {
-                Text("Title")
-            },
-            confirmButton = {
-                Button(
-                    onClick = {
-                        // Change the state to close the dialog
-                        setShowDialog(false)
-                    },
-                ) {
-                    Text("Confirm")
-                }
-            },
-            dismissButton = {
-                Button(
-                    onClick = {
-                        // Change the state to close the dialog
-                        setShowDialog(false)
-                    },
+private fun EmotionListDialog(
+    showDialog: Boolean,
+    setShowDialog: (Boolean) -> Unit,
+    currentDate: CalposeDate,
+    onDismiss: () -> Unit,
+    onEmotionClick: (CalposeDate, Int) -> Unit,
+) {
+    val url = "https://upload.wikimedia.org/wikipedia/commons/thumb/" +
+        "e/e6/Noto_Emoji_KitKat_263a.svg/1200px-Noto_Emoji_KitKat_263a.svg.png"
+
+    var emotion by remember { mutableStateOf(-1) }
+
+    if (!showDialog || currentDate.day == -1)
+        return
+
+    Dialog(onDismissRequest = onDismiss) {
+        Card(
+            elevation = 8.dp,
+            shape = RoundedCornerShape(12.dp)
+        ) {
+            Column(modifier = Modifier.padding(8.dp)) {
+
+                Text(
+                    text = "Select Emotion",
+                    fontWeight = FontWeight.Bold,
+                    fontSize = 20.sp,
+                    modifier = Modifier.padding(8.dp)
+                )
+                Spacer(modifier = Modifier.height(8.dp))
+
+                Column(
+                    modifier = Modifier.padding(16.dp)
                 ) {
-                    Text("Dismiss")
+                    // TODO  정의된 emotion 개수에 맞게 적절하게 배치되도록 수정하기 (dialog height, emotion item size)
+                    for (i in 0 until 2) {
+                        Row(
+                            modifier = Modifier.padding(8.dp)
+                        ) {
+                            for (j in 0 until 4) {
+                                Box(
+                                    Modifier.clickable(
+                                        onClick = {
+                                            onEmotionClick(currentDate, emotion)
+                                            setShowDialog(false)
+                                        }
+                                    )
+                                ) {
+                                    Image(
+                                        painter = rememberImagePainter(
+                                            data = url,
+                                            builder = {
+                                                transformations(CircleCropTransformation())
+                                            }
+                                        ),
+                                        contentDescription = null,
+                                        modifier = Modifier
+                                            .width(50.dp)
+                                            .height(50.dp)
+                                    )
+                                }
+                                Spacer(modifier = Modifier.width(16.dp))
+                            }
+                            Spacer(modifier = Modifier.height(16.dp))
+                        }
+                    }
                 }
-            },
-            text = {
-                Text("This is a text on the dialog")
-            },
-        )
+            }
+        }
     }
 }
 
 const val lightGrey = 0xa0bdbdbd
+const val todayColor = 0xFF30cf5a
 const val primaryAccent = 0xFF4db6ac
 const val primaryAccentLight = 0xFF82e9de