@rentlydev/rently-tuya 0.1.0

package/android/src/main/java/com/rentlytuya/dashboard/DoorbellSettings.kt

@@ -0,0 +1,874 @@
+package com.rentlytuya.dashboard
+
+import android.app.Activity
+import android.util.Log
+import androidx.activity.compose.BackHandler
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+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.lazy.LazyColumn
+import androidx.compose.material3.ripple
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableIntState
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
+import androidx.navigation.NavController
+import com.facebook.react.ReactApplication
+import com.rentlytuya.R
+import com.rentlytuya.alerts.RemoveDoorbellAlert
+import com.rentlytuya.alerts.RemoveDoorbellFailureAlert
+import com.rentlytuya.alerts.ResetWifiAlert
+import com.rentlytuya.components.Button
+import com.rentlytuya.components.Divider
+import com.rentlytuya.components.Label
+import com.rentlytuya.components.LoadingIndicator
+import com.rentlytuya.components.Switch
+import com.rentlytuya.tuya.Settings
+import com.rentlytuya.tuya.Tuya
+import com.rentlytuya.tuya.Tuya.TAG
+import com.rentlytuya.ui.theme.LocalColor
+import com.rentlytuya.util.DateUtil.isNotNull
+import com.rentlytuya.util.KeylessModule
+import com.rentlytuya.util.Util.isLandscape
+import com.rentlytuya.util.Util.strings
+
+enum class MotionSensitivityLevel(val level: String) {
+  HIGH("High"),
+  MEDIUM("Medium"),
+  LOW("Low")
+}
+
+enum class NightVision(val mode: String) {
+  AUTO("Auto"),
+  ON("On"),
+  OFF("Off")
+}
+
+enum class SDCardRecordType(val type: String) {
+  EVENT_RECORDING("Event Recording"),
+  NON_STOP("Non-Stop")
+}
+
+enum class ChimeType(val type: String) {
+  NONE("Not Selected"),
+  MECHANICAL("Mechanical"),
+  DIGITAL("Digital"),
+  NoBELLS("No Bells")
+}
+
+@Composable
+fun DoorbellSettings(
+  isSettings: MutableState<Boolean>,
+  isAdvancedSettings: MutableState<Boolean>,
+  isStorageSettings: MutableState<Boolean>,
+  navController: NavController,
+  isWaterMarkEnabled: MutableState<Boolean>,
+  isFlipEnabled: MutableState<Boolean>,
+  isAntiDismantlingAlarmEnabled: MutableState<Boolean>,
+  nightVisionLevel: MutableState<String>,
+  isMotionDetectionEnabled: MutableState<Boolean>,
+  motionSensitivityLevel: MutableState<String>,
+  aosuMotionSensitivityLevel: MutableState<String>,
+  isPIRDetectionEnabled: MutableState<Boolean>,
+  pirSensitivityLevel: MutableIntState,
+  storageFunctionType: MutableIntState,
+  isSDCardRecordingEnabled: MutableState<Boolean>,
+  sdCardRecordingType: MutableState<String>,
+  chimeType: MutableState<String>,
+  powerSource: MutableState<String>,
+  batteryPercentage: MutableIntState,
+  totalStorageCapacity: MutableState<String>,
+  usedStorage: MutableState<String>,
+  remainingStorageCapacity: MutableState<String>
+) {
+
+  val activity = LocalContext.current as Activity
+  val reactContext = (LocalContext.current.applicationContext as ReactApplication)
+    .reactNativeHost.reactInstanceManager.currentReactContext
+
+  val isLoading = remember { mutableStateOf(false) }
+
+  BackHandler {
+    if (isAdvancedSettings.value || isStorageSettings.value) {
+      isAdvancedSettings.value = false
+      isStorageSettings.value = false
+      navController.navigate("Settings")
+    } else {
+      isSettings.value = false
+      navController.navigate("Dashboard")
+    }
+  }
+
+  val isResetWifiAlertVisible = remember { mutableStateOf(false) }
+  val isRemoveDoorbellAlertVisible = remember { mutableStateOf(false) }
+  val isRemoveDoorbellFailureAlertVisible = remember { mutableStateOf(false) }
+
+  if (isLoading.value) {
+    LoadingIndicator()
+  }
+
+  ResetWifiAlert(
+    isResetWifiAlertVisible = isResetWifiAlertVisible.value,
+    onDismiss = { isResetWifiAlertVisible.value = false },
+    onReset = {
+      reactContext?.let { context ->
+        val keylessModule = context.getNativeModule(KeylessModule::class.java)
+        Tuya.deviceId?.let {
+          keylessModule?.sendDataToJS(
+            eventName = "navigateToAddDoorbell",
+            deviceId = it,
+            onSuccess = {
+              Log.i(TAG, "Navigate to Add Doorbell Success")
+              isResetWifiAlertVisible.value = false
+              activity.finish()
+            },
+            onFailure = {
+              Log.i(TAG, "Navigate to Add Doorbell Failed")
+              isResetWifiAlertVisible.value = false
+            }
+          )
+        } ?: Log.i(TAG, "Device ID is null")
+      }
+    }
+  )
+
+  RemoveDoorbellAlert(
+    isRemoveDoorbellAlertVisible = isRemoveDoorbellAlertVisible.value,
+    onDismiss = { isRemoveDoorbellAlertVisible.value = false },
+    onRemove = {
+      isRemoveDoorbellAlertVisible.value = false
+      isLoading.value = true
+      reactContext?.let { context ->
+        val keylessModule = context.getNativeModule(KeylessModule::class.java)
+        Tuya.deviceId?.let {
+          keylessModule?.sendDataToJS(
+            eventName = "removeCamera",
+            deviceId = it,
+            onSuccess = {
+              Log.i(TAG, "Remove Doorbell Success")
+              isLoading.value = false
+              activity.finish()
+            },
+            onFailure = {
+              Log.i(TAG, "Remove Doorbell Failed")
+              isLoading.value = false
+              isRemoveDoorbellFailureAlertVisible.value = true
+            }
+          )
+        } ?: Log.i(TAG, "Device ID is null")
+      }
+    }
+  )
+
+  RemoveDoorbellFailureAlert(
+    isRemoveDoorbellFailureAlertVisible = isRemoveDoorbellFailureAlertVisible.value,
+    onDismiss = {
+      isRemoveDoorbellFailureAlertVisible.value = false
+    },
+    onOK = {
+      isRemoveDoorbellFailureAlertVisible.value = false
+    }
+  )
+
+  when {
+    isAdvancedSettings.value -> AdvancedSettings()
+    isStorageSettings.value -> StorageSettings(
+      totalStorageCapacity = totalStorageCapacity,
+      usedStorage = usedStorage,
+      remainingStorageCapacity = remainingStorageCapacity,
+      storageFunctionType = storageFunctionType
+    )
+
+    else -> {
+      LazyColumn(
+        modifier = Modifier.fillMaxSize()
+      ) {
+        item {
+          Heading(title = strings(id = R.string.basicSettings))
+        }
+        if (!Settings.isAOSU()) {
+          item {
+            SettingsItem(
+              title = strings(id = R.string.flipScreen),
+              description = strings(id = R.string.flipScreenDescription),
+              withSwitch = true,
+              checked = isFlipEnabled.value,
+              onToggle = {
+                Settings.setFlip(
+                  enable = it,
+                  isLoading = isLoading,
+                  isFlipEnabled = isFlipEnabled
+                )
+              }
+            )
+          }
+        }
+        item {
+          SettingsItem(
+            title = strings(id = R.string.timeWaterMark),
+            description = strings(id = R.string.waterMarkDescription),
+            withSwitch = true,
+            checked = isWaterMarkEnabled.value,
+            onToggle = {
+              Settings.setWatermark(
+                enable = it,
+                isLoading = isLoading,
+                isWaterMarkEnabled = isWaterMarkEnabled
+              )
+            }
+          )
+        }
+        if (Settings.isAOSU()) {
+          item {
+            SettingsItem(
+              title = strings(id = R.string.antiDismantlingAlarm),
+              description = strings(id = R.string.antiDismantlingAlarmDescription),
+              withSwitch = true,
+              checked = isAntiDismantlingAlarmEnabled.value,
+              onToggle = {
+                Settings.setAntiDismantlingAlarm(
+                  enable = it,
+                  isLoading = isLoading,
+                  isAntiDismantlingAlarmEnabled = isAntiDismantlingAlarmEnabled
+                )
+              }
+            )
+          }
+        }
+        item {
+          SettingsItem(
+            title = strings(id = R.string.irNightVision),
+            description = strings(id = R.string.nightVisionDescription),
+            withDropDown = true,
+            dropDownTitle = strings(id = R.string.nightVision),
+            dropDownList = enumValues<NightVision>().map { it.mode },
+            selectedOption = when (nightVisionLevel.value) {
+              "0" -> NightVision.AUTO.mode
+
+              "1" -> NightVision.OFF.mode
+
+              "2" -> NightVision.ON.mode
+
+              else -> ""
+            },
+            onDropDownItemSelected = {
+              val newMode = when (it) {
+                NightVision.AUTO.mode -> "0"
+
+                NightVision.OFF.mode -> "1"
+
+                NightVision.ON.mode -> "2"
+
+                else -> null
+              }
+
+              if (newMode.isNotNull()) {
+                Settings.setNightVision(
+                  mode = nightVisionLevel,
+                  newMode = newMode,
+                  isLoading = isLoading
+                )
+              }
+            }
+          )
+        }
+
+        item {
+          Heading(title = strings(id = R.string.motionDetection))
+        }
+        item {
+          SettingsItem(
+            title = strings(id = R.string.motionDetection),
+            description = strings(id = R.string.motionDetectionDescription),
+            withSwitch = true,
+            checked = if (Settings.is8s() || Settings.isAOSU()) {
+              isMotionDetectionEnabled.value
+            } else {
+              isPIRDetectionEnabled.value
+            },
+            onToggle = {
+              Settings.setMotionDetection(
+                is8s = Settings.is8s() || Settings.isAOSU(),
+                enable = it,
+                isLoading = isLoading,
+                isMotionDetectionEnabled = if (Settings.is8s() || Settings.isAOSU()) {
+                  isMotionDetectionEnabled
+                } else {
+                  isPIRDetectionEnabled
+                }
+              )
+            }
+          )
+        }
+        if (Settings.isAOSU() && isMotionDetectionEnabled.value){
+          item {
+            SettingsItem(
+              title = strings(id = R.string.motionSensitivityLevel),
+              withDropDown = true,
+              dropDownTitle = strings(id = R.string.motionSensitivityLevel),
+              dropDownList = enumValues<MotionSensitivityLevel>().map { it.level },
+              selectedOption = when (aosuMotionSensitivityLevel.value) {
+                "1" -> MotionSensitivityLevel.LOW.level
+
+                "2" -> MotionSensitivityLevel.MEDIUM.level
+
+                "3" -> MotionSensitivityLevel.HIGH.level
+
+                else -> ""
+              },
+              onDropDownItemSelected = {
+                val newMode = when (it) {
+                  MotionSensitivityLevel.LOW.level -> "1"
+
+                  MotionSensitivityLevel.MEDIUM.level -> "2"
+
+                  MotionSensitivityLevel.HIGH.level -> "3"
+
+                  else -> null
+                }
+
+                if (newMode.isNotNull()) {
+                  Settings.setMotionSensitivity(
+                    mode = aosuMotionSensitivityLevel,
+                    newMode = newMode,
+                    isAOSU = true,
+                    isLoading = isLoading
+                  )
+                }
+              }
+            )
+          }
+        } else if (Settings.is8s() && isMotionDetectionEnabled.value) {
+          item {
+            SettingsItem(
+              title = strings(id = R.string.motionSensitivityLevel),
+              withDropDown = true,
+              dropDownTitle = strings(id = R.string.motionSensitivityLevel),
+              dropDownList = enumValues<MotionSensitivityLevel>().map { it.level },
+              selectedOption = when (motionSensitivityLevel.value) {
+                "0" -> MotionSensitivityLevel.LOW.level
+
+                "1" -> MotionSensitivityLevel.MEDIUM.level
+
+                "2" -> MotionSensitivityLevel.HIGH.level
+
+                else -> ""
+              },
+              onDropDownItemSelected = {
+                val newMode = when (it) {
+                  MotionSensitivityLevel.LOW.level -> "0"
+
+                  MotionSensitivityLevel.MEDIUM.level -> "1"
+
+                  MotionSensitivityLevel.HIGH.level -> "2"
+
+                  else -> null
+                }
+
+                if (newMode.isNotNull()) {
+                  Settings.setMotionSensitivity(
+                    mode = motionSensitivityLevel,
+                    newMode = newMode,
+                    isLoading = isLoading
+                  )
+                }
+              }
+            )
+          }
+        } else if (!Settings.is8s() && isPIRDetectionEnabled.value) {
+          item {
+            SettingsItem(
+              title = strings(id = R.string.motionSensitivityLevel),
+              withDropDown = true,
+              dropDownTitle = strings(id = R.string.motionSensitivityLevel),
+              dropDownList = enumValues<MotionSensitivityLevel>().map { it.level },
+              selectedOption = when (pirSensitivityLevel.intValue) {
+                1 -> MotionSensitivityLevel.LOW.level
+
+                3 -> MotionSensitivityLevel.MEDIUM.level
+
+                5 -> MotionSensitivityLevel.HIGH.level
+
+                else -> ""
+              },
+              onDropDownItemSelected = {
+                val newMode = when (it) {
+                  MotionSensitivityLevel.LOW.level -> 1
+
+                  MotionSensitivityLevel.MEDIUM.level -> 3
+
+                  MotionSensitivityLevel.HIGH.level -> 5
+
+                  else -> null
+                }
+
+                if (newMode.isNotNull()) {
+                  Settings.setPIRSensitivity(
+                    mode = pirSensitivityLevel,
+                    newMode = newMode,
+                    isLoading = isLoading
+                  )
+                }
+              }
+            )
+          }
+        }
+
+        item {
+          Heading(title = strings(id = R.string.storageSettings))
+        }
+        item {
+          SettingsItem(
+            title = strings(id = R.string.storageSetting),
+            description = when (storageFunctionType.intValue) {
+              1 -> strings(id = R.string.functioningAsExpected)
+              2 -> strings(id = R.string.notFunctioningAsExpected)
+              3 -> ""
+              4 -> ""
+              5 -> strings(id = R.string.checkSDCardIsInserted)
+              else -> ""
+            },
+            additionalInfo = when (storageFunctionType.intValue) {
+              1 -> strings(id = R.string.normal)
+              2 -> strings(id = R.string.abnormal)
+              3 -> strings(id = R.string.insufficientCapacity)
+              4 -> strings(id = R.string.formatting)
+              5 -> strings(id = R.string.noStorage)
+              else -> ""
+            },
+            onClick = {
+              isStorageSettings.value = true
+            }
+          )
+        }
+
+        if (Settings.is8s()) {
+          item {
+            SettingsItem(
+              title = strings(id = R.string.sdCardRecording),
+              withSwitch = true,
+              checked = isSDCardRecordingEnabled.value,
+              onToggle = {
+                Settings.setSDCardRecording(
+                  enable = it,
+                  isLoading = isLoading,
+                  isSDCardRecordingEnabled = isSDCardRecordingEnabled
+                )
+              }
+            )
+          }
+
+          if (isSDCardRecordingEnabled.value) {
+            item {
+              SettingsItem(
+                title = strings(id = R.string.recordingMode),
+                description = if (sdCardRecordingType.value == "1") {
+                  strings(id = R.string.eventWillBeRecordedWhenMotionIsDetected)
+                } else {
+                  strings(id = R.string.eventWillBeRecordedContinuously)
+                },
+                withDropDown = true,
+                dropDownTitle = strings(id = R.string.recordingMode),
+                dropDownList = enumValues<SDCardRecordType>().map { it.type },
+                selectedOption = when (sdCardRecordingType.value) {
+                  "1" -> SDCardRecordType.EVENT_RECORDING.type
+
+                  "2" -> SDCardRecordType.NON_STOP.type
+
+                  else -> ""
+                },
+                onDropDownItemSelected = {
+                  val newMode = when (it) {
+                    SDCardRecordType.EVENT_RECORDING.type -> "1"
+
+                    SDCardRecordType.NON_STOP.type -> "2"
+
+                    else -> null
+                  }
+
+                  if (newMode.isNotNull()) {
+                    Settings.setSDCardRecordingMode(
+                      newMode = newMode,
+                      mode = sdCardRecordingType,
+                      isLoading = isLoading
+                    )
+                  }
+                }
+              )
+            }
+          }
+        }
+
+        item {
+          SettingsItem(
+            title = strings(id = R.string.resetWiFi),
+            onClick = {
+              isResetWifiAlertVisible.value = true
+            }
+          )
+        }
+
+        if (!Settings.is8s()) {
+          item {
+            Heading(title = strings(id = R.string.powerInformation))
+          }
+
+          item {
+            SettingsItem(
+              title = strings(id = R.string.powerSource),
+              rightArrow = false,
+              additionalInfo = if (powerSource.value == "0") {
+                "Battery (${batteryPercentage.intValue}%)"
+              } else {
+                strings(id = R.string.charging)
+              }
+            )
+          }
+        }
+
+        if (!Settings.isAOSU()) {
+          item {
+            Heading(title = strings(id = R.string.chimeConnectionSettings))
+          }
+
+          item {
+            SettingsItem(
+              title = strings(id = R.string.chimeType),
+              description = if (Settings.is8s()) strings(id = R.string.chimeDescription8s) else strings(id = R.string.chimeDescription15s),
+              withDropDown = true,
+              dropDownTitle = strings(id = R.string.chimeType),
+              dropDownList = enumValues<ChimeType>()  // Digital chime type is not available for 8s model.
+                .filter {
+                  if (Settings.is8s()) it != ChimeType.NONE && it != ChimeType.DIGITAL
+                  else it != ChimeType.NONE
+                }
+                .map { it.type },
+              selectedOption = when ((chimeType.value)) {
+                "0" -> ChimeType.NONE.type
+
+                "1" -> ChimeType.MECHANICAL.type
+
+                "2" -> ChimeType.DIGITAL.type
+
+                "3" -> ChimeType.NoBELLS.type
+
+                else -> ""
+              },
+              onDropDownItemSelected = {
+                val newMode = when (it) {
+                  ChimeType.NONE.type -> "0"
+
+                  ChimeType.MECHANICAL.type -> "1"
+
+                  ChimeType.DIGITAL.type -> "2"
+
+                  ChimeType.NoBELLS.type -> "3"
+
+                  else -> null
+                }
+
+                if (newMode.isNotNull()) {
+                  Settings.setChime(
+                    newMode = newMode,
+                    isLoading = isLoading,
+                    mode = chimeType
+                  )
+                }
+              }
+            )
+          }
+        }
+
+        item {
+          Heading(title = strings(id = R.string.advancedSettings))
+        }
+        item {
+          SettingsItem(
+            title = strings(id = R.string.deviceInfo),
+            onClick = {
+              isAdvancedSettings.value = true
+            }
+          )
+        }
+
+        if (!Tuya.isResident || (Tuya.displayRemoveDoorbellButton ?: false)) {
+          item {
+            Row(
+              modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 15.dp, bottom = 30.dp),
+              horizontalArrangement = Arrangement.Center
+            ) {
+              Button(
+                modifier = Modifier
+                  .width(190.dp)
+                  .height(50.dp),
+                id = "RemoveDoorbell",
+                title = strings(id = R.string.removeDoorbell),
+                textColor = LocalColor.Monochrome.White,
+                secondary = true,
+                m = true,
+                semiBold = true
+              ) {
+                isRemoveDoorbellAlertVisible.value = true
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@Composable
+fun Heading(title: String) {
+  Row(
+    modifier = Modifier
+      .fillMaxWidth()
+      .height(40.dp)
+      .background(LocalColor.Monochrome.White),
+    verticalAlignment = Alignment.CenterVertically
+  ) {
+    Label(
+      modifier = Modifier
+        .padding(start = 20.dp),
+      title = title,
+      black = true,
+      bold = true,
+      l = true
+    )
+  }
+}
+
+@Composable
+fun SettingsItem(
+  title: String,
+  description: String = "",
+  additionalInfo: String = "",
+  withSwitch: Boolean = false,
+  withDropDown: Boolean = false,
+  checked: Boolean = false,
+  rightArrow: Boolean = true,
+  dropDownTitle: String = "",
+  dropDownList: List<String> = listOf(),
+  selectedOption: String = "",
+  onDropDownItemSelected: (item: String) -> Unit = {},
+  onToggle: (state: Boolean) -> Unit = {},
+  onClick: (() -> Unit)? = null
+) {
+
+  val isDropDownVisible = remember {
+    mutableStateOf(false)
+  }
+
+  Column(modifier = Modifier.background(LocalColor.Main.Light)) {
+    Row(
+      modifier = Modifier
+        .fillMaxWidth()
+        .clickable(
+          interactionSource = remember { MutableInteractionSource() },
+          indication = if (withDropDown || onClick.isNotNull()) ripple() else null
+        ) {
+          if (withDropDown) isDropDownVisible.value = true else onClick?.invoke()
+        }
+        .padding(horizontal = 20.dp),
+      horizontalArrangement = Arrangement.SpaceBetween,
+      verticalAlignment = Alignment.CenterVertically
+    ) {
+      Column(
+        modifier = Modifier
+          .fillMaxWidth(0.6f)
+          .padding(vertical = 10.dp)
+      ) {
+        Label(
+          modifier = Modifier,
+          id = title.lowercase(),
+          title = title,
+          m = true,
+          grey = true,
+          semiBold = true,
+        )
+
+        if (description.isNotBlank()) {
+          Label(
+            modifier = Modifier
+              .padding(top = 5.dp),
+            id = title.lowercase() + "Description",
+            title = description,
+            maxLines = 6,
+            s = true,
+            lightGrey = true,
+            medium = true,
+            lineHeight = 15.sp
+          )
+        }
+      }
+
+      Row(
+        modifier = Modifier
+          .fillMaxWidth(),
+        horizontalArrangement = Arrangement.End
+      ) {
+        when {
+          withSwitch -> {
+            Switch(
+              id = title + "Switch",
+              checked = checked,
+              onChange = onToggle
+            )
+          }
+
+          withDropDown -> {
+            PopUp(
+              isVisible = isDropDownVisible,
+              dropDownTitle = dropDownTitle,
+              dropDownList = dropDownList,
+              selectedOption = selectedOption,
+              onDropDownItemSelected = onDropDownItemSelected,
+            )
+          }
+
+          else -> {
+            if (additionalInfo != "") {
+              Label(
+                modifier = Modifier
+                  .padding(end = 5.dp),
+                id = title.lowercase(),
+                title = additionalInfo,
+                maxLines = 1,
+                s = true,
+                black = true,
+                semiBold = true,
+                lineHeight = 15.sp
+              )
+            }
+
+            if (rightArrow) {
+              Image(
+                modifier = Modifier
+                  .size(12.dp),
+                painter = painterResource(id = R.drawable.ic_arrow_blue_right),
+                contentDescription = "rightArrow",
+              )
+            }
+          }
+        }
+      }
+    }
+
+    Divider(
+      modifier = Modifier
+        .padding(horizontal = 10.dp),
+      thickness = 1.dp
+    )
+  }
+}
+
+@Composable
+fun PopUp(
+  isVisible: MutableState<Boolean>,
+  dropDownTitle: String = "",
+  dropDownList: List<String> = listOf(),
+  selectedOption: String = "",
+  onDropDownItemSelected: (item: String) -> Unit = {},
+) {
+
+  val configuration = LocalConfiguration.current
+
+  Row(
+    modifier = Modifier
+      .fillMaxHeight()
+      .clickable(
+        interactionSource = remember { MutableInteractionSource() },
+        indication = null
+      ) {
+        isVisible.value = true
+      },
+    horizontalArrangement = Arrangement.End,
+    verticalAlignment = Alignment.CenterVertically
+  ) {
+    Label(
+      modifier = Modifier
+        .padding(end = 5.dp),
+      title = selectedOption,
+      black = true,
+      semiBold = true,
+      m = true
+    )
+    Image(
+      modifier = Modifier
+        .size(12.dp),
+      painter = painterResource(id = R.drawable.ic_arrow_blue_right),
+      contentDescription = "rightArrow",
+    )
+  }
+
+  if (isVisible.value) {
+    Dialog(
+      onDismissRequest = {
+        isVisible.value = false
+      },
+      properties = DialogProperties(
+        usePlatformDefaultWidth = false
+      )
+    ) {
+      Column(
+        modifier = Modifier
+          .fillMaxWidth(
+            if (!isLandscape(configuration)) 0.9f else 0.5f
+          )
+          .background(LocalColor.Monochrome.White)
+          .padding(vertical = 10.dp)
+      ) {
+        Label(
+          modifier = Modifier
+            .padding(vertical = 10.dp, horizontal = 20.dp),
+          title = dropDownTitle,
+          bold = true,
+          xl20 = true,
+          black = true
+        )
+        dropDownList.forEach {
+          Row(
+            modifier = Modifier
+              .fillMaxWidth()
+              .clickable {
+                onDropDownItemSelected(it)
+                isVisible.value = false
+              }
+          ) {
+            Label(
+              modifier = Modifier
+                .padding(vertical = 10.dp, horizontal = 20.dp),
+              title = it,
+              black = true,
+              semiBold = true,
+              l = true
+            )
+          }
+        }
+      }
+    }
+  }
+}