from textual.containers import Horizontal
from textual.app import ComposeResult
from textual.widgets import Button, Input, Static

import sounddevice as sd


class ProjectSettings(Horizontal):
    DEFAULT_CSS = """
    ProjectSettings {
        height: 6;
        margin-bottom: 1;
        dock: bottom;
        background: $surface-darken-1;
        border-top: tall $surface-lighten-1;
        align-vertical: middle;
        padding: 0 1;
        
        #play-button {
            max-width: 5;
        }
        #tempo-tap {
            max-width: 7;
        }
        
        #song-bpm {
            max-width: 12;
        }
        
        #song-time-sig {
            max-width: 16;
        }
        
        Static {
            height: 3;
            content-align: left middle;
            width: auto;
        }
    }
    """
    
    def __init__(self):
        super().__init__()
        self.border_title = "Project"
        
    def on_button_pressed(self, event: Button.Pressed):
        if event.button.id == "play-button":
            song_player = self.app.query_one("#timeline").song_player
            
            if event.button.variant == "success": # play button
                song_player.play_project(self.app.project)
            else: # stop button
                song_player.pause()
    
    def compose(self) -> ComposeResult:
        yield Button("▶", tooltip="Play song", flat=True, id="play-button", variant="success") # icon becomes "⏸" when song is playing
        
        yield Static("     BPM: ")
        yield Input("120", placeholder="120", valid_empty=False, type="integer", max_length=3, id="song-bpm")
        yield Button("TAP", flat=True, id="tempo-tap")
        
        yield Static("  Time Signature: ")
        yield Input("4/4", placeholder="4/4", valid_empty=False, id="song-time-sig")