from datetime import datetime

from rio import Component, Rectangle, Row, Text, Spacer, Column, Color, TextStyle
from rio.event import on_populate, periodic

from elm.services import ConfigurationService


class LanCountdownBox(Component):
    days_until_lan: str = "0"
    hours_until_lan: str = "0"
    minutes_until_lan: str = "0"

    @on_populate
    async def on_populate(self) -> None:
        await self.update_time_until_lan()

    @periodic(60)
    async def update_time_until_lan(self) -> None:
        td = self.session[ConfigurationService].get_lan_info().date_from - datetime.now()
        total_seconds = int(td.total_seconds())

        days = total_seconds // (24 * 3600)
        remainder = total_seconds % (24 * 3600)

        hours = remainder // 3600
        remainder %= 3600

        minutes = remainder // 60

        self.days_until_lan = f"{days:02}"
        self.hours_until_lan = f"{hours:02}"
        self.minutes_until_lan = f"{minutes:02}"

    def build(self) -> Component:
        if self.session.is_mobile():
            return Rectangle(
                content=Column(
                    Rectangle(
                        content=Rectangle(
                            content=Row(
                                Text("■", margin=0.5, margin_top=0.2, style=TextStyle(font_size=1.2, fill=self.session.theme.primary_color_darker)),
                                Text("LAN Countdown", margin=0.5, margin_top=0.6, selectable=False, justify="left", grow_x=True, fill=Color.WHITE),
                            ),
                            fill=self.session.theme.header_box_background_color,
                            margin=0
                        ),
                        stroke_width=0.1,
                        stroke_color=self.session.theme.box_border_color,
                    ),
                    Column(
                        Column(
                            Rectangle(
                                content=Column(Text(self.days_until_lan, justify="center", font_size=2, fill=self.session.theme.primary_color, font_weight="bold"),
                                               Text("Tage", justify="center"), margin=1, spacing=0.5),
                                fill=self.session.theme.background_color,
                                stroke_width=0.1,
                                stroke_color=self.session.theme.primary_color
                            ),
                            Rectangle(
                                content=Column(Text(self.hours_until_lan, justify="center", font_size=2, fill=self.session.theme.primary_color, font_weight="bold"),
                                               Text("Stunden", justify="center"), margin=1, spacing=0.5),
                                fill=self.session.theme.background_color,
                                stroke_width=0.1,
                                stroke_color=self.session.theme.primary_color
                            ),
                            Rectangle(
                                content=Column(Text(self.minutes_until_lan, justify="center", font_size=2, fill=self.session.theme.primary_color, font_weight="bold"),
                                               Text("Minuten", justify="center"), margin=1, spacing=0.5),
                                fill=self.session.theme.background_color,
                                stroke_width=0.1,
                                stroke_color=self.session.theme.primary_color
                            ),
                            spacing=1,
                            proportions=[1, 1, 1]
                        ),
                        Spacer(),
                        margin=2,
                        spacing=1,
                        grow_y=True
                    )
                ),
                fill=self.session.theme.box_color,
                stroke_width=0.1,
                stroke_color=self.session.theme.box_border_color,
            )
        else:  # Desktop & Tablet
            return Rectangle(
                content=Column(
                    Rectangle(
                        content=Rectangle(
                            content=Row(
                                Text("■", margin=0.5, margin_top=0.2, style=TextStyle(font_size=1.2, fill=self.session.theme.primary_color_darker)),
                                Text("LAN Countdown", margin=0.5, margin_top=0.6, selectable=False, justify="left", grow_x=True, fill=Color.WHITE),
                            ),
                            fill=self.session.theme.header_box_background_color,
                            margin=0
                        ),
                        stroke_width=0.1,
                        stroke_color=self.session.theme.box_border_color,
                    ),
                    Column(
                        Row(
                            Rectangle(
                                content=Column(Text(self.days_until_lan, justify="center", font_size=2, fill=self.session.theme.primary_color, font_weight="bold"), Text("Tage", justify="center", font_size=0.7), margin=1, spacing=0.5),
                                fill=self.session.theme.background_color,
                                stroke_width=0.1,
                                stroke_color=self.session.theme.primary_color
                            ),
                            Rectangle(
                                content=Column(Text(self.hours_until_lan, justify="center", font_size=2, fill=self.session.theme.primary_color, font_weight="bold"), Text("Stunden", justify="center", font_size=0.7), margin=1, spacing=0.5),
                                fill=self.session.theme.background_color,
                                stroke_width=0.1,
                                stroke_color=self.session.theme.primary_color
                            ),
                            Rectangle(
                                content=Column(Text(self.minutes_until_lan, justify="center", font_size=2, fill=self.session.theme.primary_color, font_weight="bold"), Text("Minuten", justify="center", font_size=0.7), margin=1, spacing=0.5),
                                fill=self.session.theme.background_color,
                                stroke_width=0.1,
                                stroke_color=self.session.theme.primary_color,
                                margin_right=0.1
                            ),
                            spacing=1,
                            proportions=[1, 1, 1]
                        ),
                        Spacer(),
                        margin=2,
                        spacing=1,
                        grow_y=True
                    )
                ),
                fill=self.session.theme.box_color,
                stroke_width=0.1,
                stroke_color=self.session.theme.box_border_color,
            )