import reflex as rx

from .dark_mode import dark_mode_toggle
from .sidebar import sidebar
from .pages import index, overview, results


def add_components(rest_of_app):
    """
    Adds sidebar and dark_mode components
    :param rest_of_app:
    :return:
    """
    return rx.box(
            rx.hstack(
                    sidebar(),
                    rest_of_app(),
                    ),
            rx.box(
                    dark_mode_toggle(),
                    position="absolute",  # Enables absolute positioning
                    top="10px",  # Position 10px from the top
                    right="10px",  # Position 10px from the right
                    z_index=1000,  # Ensures it appears above other elements
                    ),
            position="relative",  # Sets the container as a relative position reference
            width="100vw",  # Full width of the viewport
            height="100vh",  # Full height of the viewport
            )


# Initialize the Reflex app with polished layout
app = rx.App()
app.add_page(add_components(overview), title='Overview', route='/overview')  # Overview page
app.add_page(add_components(results), title='Results', route='/results')  # Results page
app.add_page(add_components(index), title='Index', route='/')  # Index page