from textual.containers import Vertical,  VerticalScroll, Horizontal, VerticalGroup
from textual.widgets import Sparkline
from textual.app import ComposeResult

from ui.widgets.chunk_types.audio import AudioChunk


class TimelineRow(Horizontal):
    DEFAULT_CSS = """
    TimelineRow {
        background: $surface-lighten-1;
        height: 8;
        margin-bottom: 1;
    }
    """

class Timeline(VerticalScroll):
    DEFAULT_CSS = """
    Timeline {
        padding: 1 0;
        hatch: "-" $surface-lighten-1;
    }
    """
    
    def compose(self) -> ComposeResult:
        with TimelineRow():
            yield AudioChunk("cool sample.mp3")
        with TimelineRow():
            yield AudioChunk("cool sample 2.mp3")