from __future__ import annotations

from rio import Component, Column, Row, Text, Spacer, page, Rectangle

from elm.services import PreloadService

@page(name="FAQ", url_segment="faq")
class FaqPage(Component):
    def build(self) -> Component:
        return Row(
            Rectangle(
                content=Column(
                    Rectangle(
                        content=Rectangle(
                            content=Text("F.A.Q.", margin=0.5, selectable=False, overflow="wrap"),
                            fill=self.session.theme.header_box_background_color,
                            margin=0.4
                        ),
                        stroke_width=0.1,
                        stroke_color=self.session.theme.box_border_color,
                    ),
                    *[Column(
                        Text(q_a[0], font_weight="bold", overflow="wrap", fill=self.session.theme.primary_color),
                        Text(q_a[1], italic=True, overflow="wrap"),
                        spacing=0.5,
                        margin_bottom=1.5,
                        margin=1
                    ) for q_a in self.session[PreloadService].faq],
                    Spacer()
                ),
                fill=self.session.theme.box_color,
                stroke_width=0.1,
                stroke_color=self.session.theme.box_border_color
            ),
            grow_x=True,
            grow_y=True,
            margin=0 if self.session.is_mobile() else 1
        )