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


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;
        
        Button {
            max-width: 5;
        }
        
        #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 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 Static("  Time Signature: ")
        yield Input("4/4", placeholder="4/4", valid_empty=False, id="song-time-sig")