@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AddCycleTrackingDataBottomSheet(
    onSave: (CycleTrackingData) -> Unit = {},
) {
    var expanded by remember { mutableStateOf(false) }
    var selectedOption: FlowIntensity? by remember { mutableStateOf(null) }

    Scaffold(
        topBar = {
            SmallTopAppBar(navigationIcon = {
                IconButton(onClick = {}) {
                    Icon(
                        Icons.Default.Close,
                        contentDescription = "Close"
                    )
                }
            }, title = { Text(text = stringResource(id = R.string.add_cycle_tracking_data)) },
                actions = {
                    TextButton(onClick = {
                        onSave(CycleTrackingData(flowIntensity = selectedOption!!))
                    }, enabled = selectedOption != null) {
                        Text(text = "Save")
                    }
                })
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .padding(16.dp)
        ) {
            OutlinedTextField(
                modifier = Modifier.fillMaxWidth(),
                placeholder = { Text(text = "Date") },
                value = "",
                onValueChange = {})

            ExposedDropdownMenuBox(
                modifier = Modifier.fillMaxWidth(),
                expanded = expanded,
                onExpandedChange = { expanded = !expanded },
            ) {
                OutlinedTextField(
                    modifier = Modifier.fillMaxWidth(),
                    readOnly = true,
                    value = if (selectedOption != null) selectedOption!!.getLocalizedName() else "",
                    onValueChange = { },
                    label = { Text(text = stringResource(id = R.string.form_label_flow_intensity)) },
                    trailingIcon = {
                        ExposedDropdownMenuDefaults.TrailingIcon(
                            expanded = expanded,
                            onIconClick = {},
                        )
                    },
                )
                ExposedDropdownMenu(
                    modifier = Modifier.fillMaxWidth(),
                    expanded = expanded,
                    onDismissRequest = {
                        expanded = false
                    }
                ) {
                    FlowIntensity.values().forEach {
                        DropdownMenuItem(
                            text = {
                                Text(text = it.getLocalizedName())
                            },
                            onClick = {
                                selectedOption = it
                                expanded = false
                            })
                    }
                }
            }
        }
    }
}