from rio import Component, Card, Column, Text, Row, Rectangle, Button, TextStyle, Color, Spacer, TextInput


class LoginBox(Component):
    TEXT_STYLE = TextStyle(fill=Color.from_hex("02dac5"), font_size=0.9)
    def build(self) -> Component:
        return Rectangle(
            content=Column(
                TextInput(
                    text="",
                    label="Benutzername",
                    accessibility_label = "Benutzername",
                    min_height=0.5
                ),
                TextInput(
                    text="",
                    label="Passwort",
                    accessibility_label="Passwort",
                    is_secret=True
                ),
                Column(
                    Row(
                        Button(
                            Text("LOGIN", style=self.TEXT_STYLE, justify="center"),
                            shape="rectangle",
                            style="minor",
                            color="secondary",
                            margin_bottom=0.4
                        )
                    ),
                    Row(
                        Button(
                            Text("REG", style=self.TEXT_STYLE, justify="center"),
                            shape="rectangle",
                            style="minor",
                            color="secondary"
                        ),
                        Spacer(),
                        Button(
                            Text("LST PWD",style=self.TEXT_STYLE, justify="center"),
                            shape="rectangle",
                            style="minor",
                            color="secondary"
                        ),
                        proportions=(49, 2, 49)
                    )
                ),
                spacing=0.4
            ),
            fill=Color.TRANSPARENT,
            min_height=8,
            min_width=12,
            align_x=0.5,
            margin_top=0.3,
            margin_bottom=2
        )