import "deft/ui/protocols" as _           # load protocol specs
import "deft/ui/components/widget-base" as widget-base

deftype CounterWidget << UIWidget %{
    :count %{:type :number :default 0}   # inherits :id, :tab-index, etc.
}

# Constructor
def make-counter {||
    %CounterWidget{ :id "counter" :count 0 }
}

# Render — implements Drawable
defimpl CounterWidget Drawable {
    draw {|ctx bounds|
        @doc "Draw the counter value centered in bounds."
        draw/fill-bg $ctx %{ :r 20 :g 20 :b 30 }
        draw/text $ctx $bounds~x $bounds~y "Count: $self~count"
    |
    }
}

# Keyboard — implements Keyable
defimpl CounterWidget Keyable {
    on-key {|event bounds|
        match $event~key {
            "+"      => [assoc $self :count ($self~count + 1)]
            "-"      => [assoc $self :count ($self~count - 1)]
            "return" => [assoc $self :count 0]
            _        => nil                          # not handled — bubble
        |
    |
    }
}

# Make it focusable
defimpl CounterWidget Focusable {
    accepts-focus? {|| true }
    on-focus {|| nil }
    on-blur  {|| nil }
} 

 import "deft/ui/components/text-input" as text-input
import "deft/ui/components/button" as button
import "deft/ui/components/column" as column

def make-search-bar {||
    column/make %{
        :children @{
            [text-input/make %{ :id "query" :placeholder "Search..." }]
            [button/make %{ :label "Go" :on-click { |state| [do-search $state] } }]
        |
    |}
} 

 # Theme-tracked — no colours passed
[dropdown %{
    id "topic"
    items $titles
    selected $idx
    open $open
    on-toggle on-toggle
    on-change on-change }]

# Fixed-look — colours override the theme
[dropdown %{
    ...
    fg "#ffffff"
    bg "#2a2a3a"
    sel-bg "#3366cc" }] 

 [dropdown %{ id "lang"
             items @{ "Red" "Green" "Blue" }
             selected 0
             open false
             on-toggle {|| ... }            # flip `open`, rebuild
             on-change {| idx| ... }        # commit: act on items[idx]
             list-width 40 }] 

 [dropdown %{ id "man"
             items $_titles
             selected $state~idx
             open $state~open
             filterable true
             query $state~q
             placeholder "Filter…"
             on-query {| q| ... }       # store $state~q, rebuild
             on-toggle {|| ... }
             on-change {| idx| ... }] 

 def on-toggle {||
    set next-open (!$state~open)
    def state [merge $state %{ :open $next-open :query "" }]
    [rebuild-widget-tree]
    if $next-open { [tui/focus-widget "man-search"] }   # focus the field
}

def on-query {| q |
    def state [assoc $state :query $q]
    [rebuild-widget-tree]
    [tui/focus-widget "man-search"]                     # keep focus across rebuild
}

def on-change {| idx |
    def state [merge $state %{ :selected $idx :open false :query "" }]
    [rebuild-widget-tree]
} 

 import "deft/ui/components/dropdown" as dd

defimpl MyApp Keyable {
    on-key {| event |
        if ($event~type != :key-down) { return nil }
        if ($event~key == :escape) { [close-dropdown]; return $self }

        if $state~dropdown-open {
            set tree [deref $widget-state]
            set list [find-by-id $tree "my-dd-list"]
            if ![nil? $list] {
                set result [dd/nav-key $list $event~key]
                if [nth $result 0] {
                    set new-list [nth $result 1]
                    # Enter returns nil — on-change already rebuilt.
                    if ![nil? $new-list] {
                        set tree [replace-by-id $tree "my-dd-list" $new-list]
                        [reset! $widget-state $tree] }
                    return $self } } }
        nil } } 

 [select-list %{ items $items
                selected $idx
                on-key {| key idx| ... }      # fires on up/down/enter/click
                on-change {| idx| ... }       # fires on enter / click
                follow-selected true }] 

 %{ :id "src"              # stable id for expansion/cursor state (recommended;
                          # falls back to a positional path like "0.2")
   :label "src"           # display text (required for map nodes)
   :children @{ ... }     # presence makes the node expandable
   :icon "▸"              # optional glyph before the label
   :fg "#..." :bg "#..." }  # optional per-node colours 

 import "deft/ui/components/tree" as tree-kit

def dir-nodes {| path |
    @doc "Map a directory listing to tree nodes; dirs recurse eagerly."
    set out @{}
    for e [fs/list $path] {
        set p [fs/join $path $e~name]
        if $e~is-dir {
            $out << %{ :id $p :label $e~name :children [dir-nodes $p] }
        } else {
            $out << %{ :id $p :label $e~name }
        }
    }
    $out
}

[tree-kit/tree %{ nodes    [dir-nodes "."]
                  expanded %{ "src" true }
                  on-select {| info| ... }
                  on-toggle {| id open?| ... } }] 

 def on-tree-toggle {| id open? |
    set exp [if $open? {[assoc $expanded $id true]} {[dissoc $expanded $id]}]
    def state [assoc $state :expanded $exp]
    [rebuild-widget-tree] } 

 defimpl MyColumn Container {
    children {||
        $self~children
    |
    }
} 

 tui/focus-widget "query"                      # set focus
tui/focused-widget-id                         # => "query" (or nil)
tui/cycle-focus :forward $tree                # Tab-style cycling
tui/clear-focus                               # drop focus 

 defimpl MyInput Drawable {
    draw {|ctx bounds focused|
        # ... draw the cursor if $focused is true ...
    |
    }
} 

 defprotocol Gridable %{
    row-count {}
    col-count {}
    cell {row col value opts^CellOpts}
}

defimpl MyData Gridable {
    row-count {|| $self~rows(len) }
    col-count {|| $self~cols(len) }
    cell {|row col value opts|
        # return a display value for (row, col)
    |
    }
} 

 defimpl MyWidget Keyable {
    on-key {|event bounds| ... }     # ✓ matches spec
    onkey  {|event bounds| ... }     # ⚠ warned — not in spec
}