from __future__ import annotations

from copy import copy
from typing import Any, Optional
from uuid import uuid4

from rio import Component, Column, Row, Text, Spacer, page, Color, Rectangle, TextInput, GuardEvent
from rio.event import on_populate

from elm.types import UserSession, User, Ticket, Seat
from elm.services import UserService, LocalData, LocalDataService, ConfigurationService
from elm.components import ElmButton

@page(name="Participants", url_segment="participants")
class ParticipantsPage(Component):
    participants: list[tuple[User, Seat]] = []

    @on_populate
    async def on_populate(self) -> None:
        seats = await Seat.find_many(
            Seat.user != None,
            fetch_links=True
        ).to_list()

        self.participants = [(seat.user, seat) for seat in seats]

    def build(self) -> Component:
        return Row(
            Rectangle(
                content=Column(
                    Rectangle(
                        content=Rectangle(
                            content=Text("Teilnehmer", 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(
                        Row(
                            Text("Nutzer", grow_x=True, font_weight="bold"),
                            Text("Sitzplatz", font_weight="bold"),
                            margin=0.5
                        ),
                        *[
                            Rectangle(
                                content=Row(
                                    Text(user.user_name, grow_x=True, font_size=0.8),
                                    Text(seat.seat_id, font_size=0.8),
                                    margin=0.5
                                ),
                                hover_fill=self.session.theme.secondary_color,
                                transition_time=0.2
                            ) for user, seat in self.participants],
                        margin=1
                    ),
                    Spacer()
                ),
                fill=self.session.theme.box_color,
                stroke_width=0.1,
                stroke_color=self.session.theme.box_border_color
            ),
            margin=1,
            grow_x=True
        )