compose-jb/examples/widgets-gallery/shared/src/commonMain/kotlin/org/jetbrains/compose/demo/widgets/ui/screens/AppBars.kt

package org.jetbrains.compose.demo.widgets.ui.screens

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.automirrored.outlined.ReadMore
import androidx.compose.material.icons.filled.MoreHoriz
import androidx.compose.material.icons.filled.StarBorder
import androidx.compose.material.icons.outlined.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.demo.widgets.theme.twitterColor
import org.jetbrains.compose.demo.widgets.ui.WidgetsType
import org.jetbrains.compose.demo.widgets.ui.utils.SubtitleText
import org.jetbrains.compose.demo.widgets.ui.utils.TitleText
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.stringResource
import widgets_gallery.shared.generated.resources.Res

@Composable
fun AppBars() {
    Column(Modifier.testTag(WidgetsType.APP_BARS.testTag)) {
        TopAppBarsDemo()
        BottomAppBarDemo()
        NavigationBarDemo()
    }
}

@OptIn(ExperimentalResourceApi::class)
@Composable
private fun TopAppBarsDemo() {
    SubtitleText(subtitle = "Top App bar")

    TopAppBar(
        title = { Text(text = "Home") },
        elevation = 8.dp,
        navigationIcon = {
            IconButton(onClick = {}) {
                Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "ArrowBack")
            }
        }
    )

    Spacer(modifier = Modifier.height(8.dp))

    TopAppBar(
        title = { Text(text = "Instagram") },
        backgroundColor = MaterialTheme.colors.surface,
        contentColor = MaterialTheme.colors.onSurface,
        elevation = 8.dp,
        navigationIcon = {
            IconButton(onClick = {}) {
                Icon(painterResource(Res.drawable.ic_instagram), contentDescription = "Instagram")
            }
        },
        actions = {
            IconButton(onClick = {}) {
                Icon(painterResource(Res.drawable.ic_send), contentDescription = "Send")
            }
        }
    )

    Spacer(modifier = Modifier.height(8.dp))

    TopAppBar(
        title = {
            Icon(
                painterResource(Res.drawable.ic_twitter),
                contentDescription = "Twitter",
                tint = twitterColor,
                modifier = Modifier.fillMaxWidth()
            )
        },
        backgroundColor = MaterialTheme.colors.surface,
        contentColor = MaterialTheme.colors.onSurface,
        elevation = 8.dp,
        navigationIcon = {
            Image(
                painterResource(Res.drawable.p6),
                contentDescription = "",
                modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
                    .requiredSize(32.dp).clip(CircleShape)
            )
        },
        actions = {
            Icon(
                Icons.Default.StarBorder,
                contentDescription = "",
                modifier = Modifier.padding(horizontal = 8.dp)
            )
        }
    )
    Spacer(modifier = Modifier.height(8.dp))
}

@Composable
private fun BottomAppBarDemo() {
    Spacer(modifier = Modifier.height(16.dp))
    SubtitleText("Bottom app bars: Note bottom app bar support FAB cutouts when used with scaffolds see demoUI crypto app")

    BottomAppBar(
        cutoutShape = CircleShape
    ) {
        IconButton(onClick = {}) {
            Icon(Icons.Default.MoreHoriz, contentDescription = "")
        }
        TitleText(title = "Bottom App Bar")
    }
}

@OptIn(ExperimentalResourceApi::class)
@Composable
private fun NavigationBarDemo() {
    Spacer(modifier = Modifier.height(16.dp))
    SubtitleText(subtitle = "Bottom Navigation Bars")
    val navItemState = remember { mutableStateOf(NavType.HOME) }
    BottomNavigation(backgroundColor = MaterialTheme.colors.surface) {
        BottomNavigationItem(
            icon = { Icon(Icons.Outlined.Home, contentDescription = "Home") },
            selected = navItemState.value == NavType.HOME,
            onClick = { navItemState.value = NavType.HOME },
            label = { Text(text = stringResource(Res.string.spotify_nav_home)) },
        )
        BottomNavigationItem(
            icon = { Icon(Icons.Outlined.Search, contentDescription = "Search") },
            selected = navItemState.value == NavType.SEARCH,
            onClick = { navItemState.value = NavType.SEARCH },
            label = { Text(text = stringResource(Res.string.spotify_nav_search)) }
        )
        BottomNavigationItem(
            icon = { Icon(Icons.Outlined.LibraryMusic, contentDescription = "LibraryMusic") },
            selected = navItemState.value == NavType.LIBRARY,
            onClick = { navItemState.value = NavType.LIBRARY },
            label = { Text(text = stringResource(Res.string.spotify_nav_library)) }
        )
    }

    Spacer(modifier = Modifier.height(16.dp))

    BottomNavigation {
        BottomNavigationItem(
            icon = { Icon(Icons.AutoMirrored.Outlined.ReadMore, contentDescription = "ReadMore") },
            selected = navItemState.value == NavType.HOME,
            onClick = { navItemState.value = NavType.HOME },
        )
        BottomNavigationItem(
            icon = { Icon(Icons.Outlined.Search, contentDescription = "Search") },
            selected = navItemState.value == NavType.SEARCH,
            onClick = { navItemState.value = NavType.SEARCH },
        )
        BottomNavigationItem(
            icon = { Icon(Icons.Outlined.CleanHands, contentDescription = "CleanHands") },
            selected = navItemState.value == NavType.LIBRARY,
            onClick = { navItemState.value = NavType.LIBRARY },
        )
    }
}

private enum class NavType {
    HOME, SEARCH, LIBRARY
}