from textual.screen import ModalScreen
from textual.widgets import Label, Select, 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;
            background: red;
            .setting-name {
                text-style: bold;
            }
            .setting-desc {
                text-style: dim;
                width: 100%;
                min-width: 30;
            }
            VerticalGroup {
                width: 50%;
                min-width: 20;
            }

            Select {
                width: 25;
                padding: 0;
            }
        }
    }
    """

    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():
                with TabPane("Appearance"):
                    with HorizontalGroup(classes="setting"):
                        with VerticalGroup():
                            yield Label("Colour Theme", classes="setting-name")
                            yield Label("Colour theme used for the entire Berry app.", classes="setting-desc")
                        yield Select.from_values(["theme 1", "theme 2", "theme 3"], allow_blank=False)
                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")