zeichen-app-android/app/src/main/java/sh/modal/apps/zeichen/MainActivity.kt

package sh.modal.apps.zeichen

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Folder
import androidx.compose.material.icons.outlined.Menu
import androidx.compose.material.icons.outlined.Note
import androidx.compose.material.icons.outlined.Search
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch
import sh.modal.apps.zeichen.components.Navigation
import sh.modal.apps.zeichen.ui.theme.ZeichenTheme

class MainActivity : ComponentActivity() {
    @ExperimentalMaterialApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ZeichenTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    View()
                }
            }
        }
    }
}

@ExperimentalMaterialApi
@Composable
fun View(drawerOpen: Boolean = false) {
    val scaffoldState = rememberScaffoldState(drawerState = DrawerState(initialValue = if (drawerOpen) DrawerValue.Open else DrawerValue.Closed ))
    val scope = rememberCoroutineScope()
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Zeichen") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(Icons.Outlined.Menu, contentDescription = "Menu")
                    }
                },
                actions = {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(Icons.Outlined.Search, contentDescription = "Search")
                    }
                },
            )
        },
        bottomBar = {
            Navigation()
        },
        drawerContent = {
            Column (
                modifier = Modifier.verticalScroll(rememberScrollState())
            ) {
                Text("Folders", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.body2)
                ListItem(
                    modifier = Modifier.clickable(enabled = true, onClick = {}),
                    icon = { Icon(Icons.Outlined.Folder, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    text = { Text("Folder 1") },
                    secondaryText = { Text("5 notes") }
                )
                Divider(startIndent = 72.dp)
                ListItem(
                    modifier = Modifier.clickable(enabled = true, onClick = {}),
                    icon = { Icon(Icons.Outlined.Folder, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    text = { Text("Folder 2") },
                    secondaryText = { Text("5 notes") }
                )
                Divider(startIndent = 72.dp)
                ListItem(
                    modifier = Modifier.clickable(enabled = true, onClick = {}),
                    icon = { Icon(Icons.Outlined.Folder, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    text = { Text("Folder 3") },
                    secondaryText = { Text("5 notes") }
                )
                Divider()
                Text("Notes", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.body2)
                ListItem (
                    modifier = Modifier.clickable(enabled = true, onClick = {}),
                    icon = { Icon(Icons.Outlined.Note, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    singleLineSecondaryText = false,
                    text = { Text("Note 1") },
                    secondaryText = { Text("In Material, surfaces in dark themes with higher") },
                    trailing = { Text("5 mins ago") }
                )
                Divider(startIndent = 72.dp)
                ListItem (
                    modifier = Modifier.clickable(enabled = true, onClick = {}),
                    icon = { Icon(Icons.Outlined.Note, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    singleLineSecondaryText = false,
                    text = { Text("Note 2") },
                    secondaryText = { Text("This is the note content.") },
                    trailing = { Text("1 hr ago") }
                )
                Divider(startIndent = 72.dp)
                ListItem (
                    modifier = Modifier.clickable(enabled = true, onClick = {}),
                    icon = { Icon(Icons.Outlined.Note, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    singleLineSecondaryText = false,
                    text = { Text("Note 3") },
                    secondaryText = { Text("In Material, surfaces in dark themes with higher") },
                    trailing = { Text("yesterday") }
                )
                Divider(startIndent = 72.dp)
                ListItem (
                    modifier = Modifier.clickable(enabled = true, onClick = {}),
                    icon = { Icon(Icons.Outlined.Note, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    singleLineSecondaryText = false,
                    text = { Text("Note 3") },
                    secondaryText = { Text("In Material, surfaces in dark themes with higher") },
                    trailing = { Text("last Wed") }
                )
                Divider(startIndent = 72.dp)
                ListItem (
                    modifier = Modifier.clickable(enabled = true, onClick = {}),
                    icon = { Icon(Icons.Outlined.Note, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    singleLineSecondaryText = false,
                    text = { Text("Note 3") },
                    secondaryText = { Text("This is the note content.") },
                    trailing = { Text("last Mon") }
                )
                Divider(startIndent = 72.dp)
                ListItem (
                    modifier = Modifier.clickable(enabled = true, onClick = {}),
                    icon = { Icon(Icons.Outlined.Note, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    singleLineSecondaryText = false,
                    text = { Text("Note 3") },
                    secondaryText = { Text("This is the note content.") },
                    trailing = { Text("2 wks ago") }
                )
                Divider(startIndent = 72.dp)
                ListItem (
                    modifier = Modifier.clickable(enabled = true, onClick = {}),
                    icon = { Icon(Icons.Outlined.Note, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    singleLineSecondaryText = false,
                    text = { Text("Note 3") },
                    secondaryText = { Text("This is the note content.") },
                    trailing = { Text("1 mo ago") }
                )
                Divider(startIndent = 72.dp)
                ListItem (
                    modifier = Modifier.clickable(enabled = true, onClick = {}),
                    icon = { Icon(Icons.Outlined.Note, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    singleLineSecondaryText = false,
                    text = { Text("Note 3") },
                    secondaryText = { Text("This is the note content.") },
                    trailing = { Text("7 mos ago") }
                )
                Divider(startIndent = 72.dp)
                ListItem (
                    modifier = Modifier.clickable(enabled = true, onClick = { }),
                    icon = { Icon(Icons.Outlined.Note, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    singleLineSecondaryText = false,
                    text = { Text("Note 3") },
                    secondaryText = { Text("This is the note content.") },
                    trailing = { Text("1 yr ago") }
                )
                Divider(startIndent = 72.dp)
                ListItem (
                    modifier = Modifier.clickable(enabled = true, onClick = { }),
                    icon = { Icon(Icons.Outlined.Note, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    singleLineSecondaryText = false,
                    text = { Text("Note 3") },
                    secondaryText = { Text("This is the note content.") },
                    trailing = { Text("5 yrs ago") }
                )
                Divider(startIndent = 72.dp)
                ListItem (
                    modifier = Modifier.clickable(enabled = true, onClick = {}),
                    icon = { Icon(Icons.Outlined.Note, modifier = Modifier.size(40.dp), contentDescription = "Folder") },
                    singleLineSecondaryText = false,
                    text = { Text("Note 3") },
                    secondaryText = { Text("This is the note content.") },
                    trailing = { Text("2010") }
                )
            }
        },
        scaffoldState = scaffoldState
    ) {
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            Text("hi")
        }
    }
}

@ExperimentalMaterialApi
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ZeichenTheme {
        View()
    }
}

@ExperimentalMaterialApi
@Preview(showBackground = true)
@Composable
fun WithOpenDrawerPreview() {
    ZeichenTheme {
        View(true)
    }
}