from textual.screen import ModalScreen
from textual.containers import HorizontalGroup, Vertical
from textual.app import ComposeResult
from textual.widgets import Static, Input, Button
from textual.binding import Binding


class ChannelCreateScreen(ModalScreen):
    DEFAULT_CSS = """
    ChannelCreateScreen {
        align: center middle;
        
        #center {
            width: 50;
            height: 11;
            border: panel $primary;
            
            align: center top;
            padding: 1 2;
            
            Static {
                width: auto;
                height: 3;
                content-align: left middle;
            }
            
            Input {
                width: 25;
            }
            
            Button {
                margin-right: 2;
            }
            
            HorizontalGroup {
                align: center middle;
                margin-bottom: 1;
            }
        }
        
        
    }
    """
    
    BINDINGS = [
        Binding("escape", "dismiss", "Cancel", tooltip="Cancel channel creation")
    ]
    
    def on_input_submitted(self, event: Input.Submitted):
        self.app.create_channel(event.input.value)
        self.dismiss()
        
    def on_button_pressed(self, event: Button.press):
        if event.button.id == "create":
            self.app.create_channel(self.query_one(Input).value)
        self.dismiss()
    
    def compose(self) -> ComposeResult:
        with Vertical(id="center") as center:
            center.border_title = "Create New Channel"
            with HorizontalGroup():
                yield Static("Channel Name: ")
                yield Input(placeholder="Piano", max_length=50)
            with HorizontalGroup():
                yield Button("Cancel", variant="error", id="cancel")
                yield Button("Create", variant="success", id="create")