from textual.widgets import Static
from textual.message import Message
from textual.reactive import reactive

class BingoField(Static):
    '''A Bingo field widget.'''
    
    cursor_x, cursor_y = 2, 2
    text = reactive('')

    class Selected(Message):
        '''Send message to the board containing clicked field info'''
        def __init__(self, num: int, selected: bool) -> None:
            self.num = num
            self.selected = selected
            super().__init__()

    def __init__(self, num, text: str) -> None:
        self.num = num
        self.selected = False
        super().__init__()
        self.text = text

    def on_mount(self) -> None:
        self.styles.content_align = ('center', 'middle')
        self.styles.border = ('solid', 'green')
        self.styles.height = '100%'
        self.styles.width = '100%'

    def on_click(self) -> None:
        self.selected = not self.selected 
        if self.selected:
            self.styles.animate('background', 'green', duration=0.1)
            self.styles.border = ('solid', 'black')
        else:
            self.styles.animate('background', '#1c1c1c', duration=0.1)
            self.styles.border = ('solid', 'green')

        # The post_message method sends an event to be handled in the DOM
        self.post_message(self.Selected(self.num, self.selected))

    def render(self) -> str:
        return str(self.text)