from textual.screen import ModalScreen
from textual.widgets import Label, TabbedContent, TabPane, Checkbox
from textual.containers import Vertical, HorizontalGroup, VerticalGroup
from textual.binding import Binding


class SettingsScreen(ModalScreen):
    border_title = "Settings"
    DEFAULT_CSS = """
    SettingsScreen {
        align: center middle;

        #window {
            border: panel $primary;
            background: $background;
            width: 65%;
            height: 65%;
            padding: 1;
        }

        TabPane {
            padding: 1;
        }

        .setting {
            padding: 0 2;
            .setting-name {
                text-style: bold;
            }
            .setting-desc {
                text-style: dim;
                text-wrap: wrap;
                width: 1fr;
            }
            VerticalGroup {
                max-width: 30%;
            }
        }
    }
    """

    BINDINGS = [
        Binding("escape", "close", "Close")
    ]

    def action_close(self):
        self.dismiss()

    def compose(self):
        with Vertical(id="window") as window:
            window.border_title = "Settings"
            with TabbedContent():
                yield TabPane("Appearance")
                with TabPane("Editor"):
                    with HorizontalGroup(classes="setting"):
                        with VerticalGroup():
                            yield Label("Word Wrap", classes="setting-name")
                            yield Label("Enable word wrap in the code editor.", classes="setting-desc")
                        yield Checkbox(value=True)
                yield TabPane("Plugins")