class SingleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            TeamItTheme {
                Surface(color = MaterialTheme.colors.background) {
                    NavHost(navController = navController, startDestination = "home") {
                        composable("home") {
                            HomeScreen(navController)
                        }

                        composable("new") {
                            NewMatchScreen()
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun HomeScreen(navController: NavHostController) {
    val innerController = rememberNavController()

    Scaffold(
        floatingActionButton = {
            FloatingActionButton(onClick = { navController.navigate("new") }) {
                Icon(imageVector = Icons.Rounded.Add, contentDescription = null)
            }
        },
        floatingActionButtonPosition = FabPosition.Center,
        bottomBar = {
            BottomAppBar(
                cutoutShape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50))
            ) {
                BottomNavigation {

                    val navBackStackEntry by innerController.currentBackStackEntryAsState()
                    val currentDestination = navBackStackEntry?.destination
                    BottomNavigationItem(
                        selected = currentDestination?.hierarchy?.any { it.route == "matches" } == true,
                        onClick = {
                            innerController.navigate("matches")
                        },
                        icon = { Icon(Icons.Rounded.List, contentDescription = null) }

                    )
                    BottomNavigationItem(
                        selected = currentDestination?.hierarchy?.any { it.route == "settings" } == true,
                        onClick = {
                            innerController.navigate("settings")
                        },
                        icon = { Icon(Icons.Rounded.Settings, contentDescription = null) }
                    )
                }
            }
        },
        isFloatingActionButtonDocked = true
    ) {
        NavHost(navController = innerController, startDestination = "matches") {
            composable("matches") {
                MyMatchesScreen()
            }
            composable("settings") {
                SettingsScreen()
            }
        }
    }
}