import solara
import anywidget
import traitlets

class CounterWidget(anywidget.AnyWidget):
    # Widget front-end JavaScript code
    _esm = """
    function render({ model, el }) {
      let button = document.createElement("button");
      button.innerHTML = `count is ${model.get("value")}`;
      button.addEventListener("click", () => {
        model.set("value", model.get("value") + 1);
        model.save_changes();
      });
      model.on("change:value", () => {
        button.innerHTML = `count is ${model.get("value")}`;
      });
      el.appendChild(button);
    }
    export default { render };
    """
    # Stateful property that can be accessed by JavaScript & Python
    value = traitlets.Int(0).tag(sync=True)
    
@solara.component
def Page():
    count = solara.use_reactive(0)
    counter = CounterWidget.element(value=count.value, on_value=count.set)
    solara.Markdown(f"### Counter Widget count: {count.value}")
    solara.Button("Reset counter", on_click=lambda: count.set(0))

import solara
import anywidget
import traitlets

class CounterWidget(anywidget.AnyWidget):
    # Widget front-end JavaScript code
    _esm = """
    function render({ model, el }) {
      let button = document.createElement("button");
      button.innerHTML = `count is ${model.get("value")}`;
      button.addEventListener("click", () => {
        model.set("value", model.get("value") + 1);
        model.save_changes();
      });
      model.on("change:value", () => {
        button.innerHTML = `count is ${model.get("value")}`;
      });
      el.appendChild(button);
    }
    export default { render };
    """
    # Stateful property that can be accessed by JavaScript & Python
    value = traitlets.Int(0).tag(sync=True)
    
@solara.component
def Page():
    count = solara.use_reactive(0)
    counter = CounterWidget.element(value=count.value, on_value=count.set)
    solara.Markdown(f"### Counter Widget count: {count.value}")
    solara.Button("Reset counter", on_click=lambda: count.set(0))

text_1 = solara.reactive("This is a global reactive variable")
count = solara.reactive(0)

class CounterWidget(anywidget.AnyWidget):
    # Widget front-end JavaScript code
    _esm = """
    function render({ model, el }) {
      let button = document.createElement("button");
      button.innerHTML = `count is ${model.get("value")}`;
      button.addEventListener("click", () => {
        model.set("value", model.get("value") + 1);
        model.save_changes();
      });
      model.on("change:value", () => {
        button.innerHTML = `count is ${model.get("value")}`;
      });
      el.appendChild(button);
    }
    export default { render };
    """
    # Stateful property that can be accessed by JavaScript & Python
    value = traitlets.Int(0).tag(sync=True)

    def __init__(self):
        super().__init__()
        self.value = count.value
        
    @traitlets.observe("value")
    def _on_value_change(self, change):
        count.set(int(change["new"]))

@solara.component
def Page():
    counter = CounterWidget.element()
    solara.Markdown(f"### Counter Widget count: {count.value}")
    solara.Button("Reset counter", on_click=lambda: count.set(0))

text_1 = solara.reactive("This is a global reactive variable")
count = solara.reactive(0)

class CounterWidget(anywidget.AnyWidget):
    # Widget front-end JavaScript code
    _esm = """
    function render({ model, el }) {
      let button = document.createElement("button");
      button.innerHTML = `count is ${model.get("value")}`;
      button.addEventListener("click", () => {
        model.set("value", model.get("value") + 1);
        model.save_changes();
      });
      model.on("change:value", () => {
        button.innerHTML = `count is ${model.get("value")}`;
      });
      el.appendChild(button);
    }
    export default { render };
    """
    # Stateful property that can be accessed by JavaScript & Python
    value = traitlets.Int(0).tag(sync=True)

    def __init__(self):
        super().__init__()
        self.value = count.value
        
    @traitlets.observe("value")
    def _on_value_change(self, change):
        count.set(int(change["new"]))

@solara.component
def Page():
    counter = CounterWidget.element()
    solara.Markdown(f"### Counter Widget count: {count.value}")
    solara.Button("Reset counter", on_click=lambda: count.set(0))