from textual.containers import Vertical, VerticalScroll, Horizontal
from textual.widgets import Button, ListView
from textual.app import ComposeResult

from ui.widgets.channel import Channel


class Sidebar(Vertical):
    DEFAULT_CSS = """
    Sidebar {
        dock: left;
        background: $surface;
        width: 43;
        border-right: tall $surface-lighten-1;
        padding: 1;
        margin-top: 1;
        
        #add-channel {
            min-width: 100%;
            margin: 1
        }
    }
    """
    
    def compose(self) -> ComposeResult:
        with VerticalScroll(id="channels"):
            for i, channel in enumerate(self.app.project.channels):
                yield Channel(
                    i,
                    channel.name,
                    channel.mute,
                    channel.solo,
                    channel.pan,
                    channel.volume
                )
            yield Button("+ New Channel", variant="success", id="add-channel")