from __future__ import annotations

from rio import Component, event, Spacer, Card, Container, Column, Row, TextStyle, Color, Text, PageView, Button, Link, Rectangle

from elm.components.HeaderBar import HeaderBar
from elm.components.NavigationBar import NavigationBar


class RootComponent(Component):
    is_navigation_bar_extended: bool = False

    def on_extension_state_changed(self, is_extended: bool) -> None:
        self.is_navigation_bar_extended = is_extended

    def build(self) -> Component:
        return Column(
            HeaderBar(),
            Row(
                NavigationBar(extension_state_changed=self.on_extension_state_changed),
                Spacer() if self.is_navigation_bar_extended else PageView(grow_x=True, grow_y=True),  # actual pages
                grow_y=True,
                grow_x=True
            ),
        )