import reflex as rx


def sidebar_item(
        text: str, icon: str, href: str
        ) -> rx.Component:
    return rx.link(
            rx.hstack(
                    rx.icon(icon),
                    rx.text(text, size="4"),
                    width="100%",
                    padding_x="0.5rem",
                    padding_y="0.75rem",
                    align="center",
                    style={
                        "_hover": {
                            "bg": rx.color("accent", 4),
                            "color": rx.color("accent", 11),
                            },
                        "border-radius": "0.5em",
                        },
                    ),
            href=href,
            underline="none",
            weight="medium",
            width="100%",
            )


def sidebar_items() -> rx.Component:
    return rx.vstack(
            sidebar_item("Prompt Order Experiment", "square-library", "/#"),
            sidebar_item("Overview", "layout-dashboard", "/overview"),
            sidebar_item("Results", "bar-chart-4", "/results"),
            # sidebar_item("Messages", "mail", "/#"),
            spacing="1",
            width="100%",
            )


def sidebar() -> rx.Component:
    return rx.box(
            rx.desktop_only(
                    rx.vstack(
                            rx.hstack(
                                    rx.image(
                                            src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg",
                                            width="2.25em",
                                            height="auto",
                                            border_radius="25%",
                                            ),
                                    rx.heading(
                                            "Prompt Order Experiment", size="7", weight="bold"
                                            ),
                                    align="center",
                                    justify="start",
                                    padding_x="0.5rem",
                                    width="100%",
                                    ),
                            sidebar_items(),
                            spacing="5",
                            # position="fixed",
                            # left="0px",
                            # top="0px",
                            # z_index="5",
                            padding_x="1em",
                            padding_y="1.5em",
                            bg=rx.color("accent", 3),
                            align="start",
                            # height="100%",
                            height="650px",
                            width="16em",
                            ),
                    ),
            rx.mobile_and_tablet(
                    rx.drawer.root(
                            rx.drawer.trigger(
                                    rx.icon("align-justify", size=30)
                                    ),
                            rx.drawer.overlay(z_index="5"),
                            rx.drawer.portal(
                                    rx.drawer.content(
                                            rx.vstack(
                                                    rx.box(
                                                            rx.drawer.close(
                                                                    rx.icon("x", size=30)
                                                                    ),
                                                            width="100%",
                                                            ),
                                                    sidebar_items(),
                                                    spacing="5",
                                                    width="100%",
                                                    ),
                                            top="auto",
                                            right="auto",
                                            height="100%",
                                            width="20em",
                                            padding="1.5em",
                                            bg=rx.color("accent", 2),
                                            ),
                                    width="100%",
                                    ),
                            direction="left",
                            ),
                    padding="1em",
                    ),
            )