Py.Cafe

import solara
import traitlets
from time import sleep
from anywidget import AnyWidget


class CustomWidget(AnyWidget):
    _esm = "view.js"

    color = traitlets.Unicode(allow_none=True, default_value=None).tag(sync=True)

    @traitlets.observe("color")
    def callback(self, change):
        print("Change:", change)
        self.color = None


@solara.component
def Page():
    el = CustomWidget.element()

    def change_color(delay=None):
        if delay is not None:
            sleep(delay)
        el_widget = solara.get_widget(el)
        el_widget.color = "limegreen"
        el_widget.send({"color": "limegreen"})

    solara.use_effect(change_color)

class Model {
    constructor(model) {
        this.model = model;
        console.log("MADE MODEL", this.model.get("color"));
    }

    initialize() {
        this.model.on("change:color", () => {console.log("CHANGE:COLOR@MODEL", this.model.get("color"))});
        this.model.on("msg:custom", (content) => {console.log("MSG:CUSTOM@MODEL", content.color)});
    }

    defaults() {
        return {
            color: undefined,
        }
    }

    get(key) {
        return this.model.get(key)
    }

    on(eventName, callback) {
        this.model.on(eventName, callback);
    }
}

class View {
    constructor(model, el) {
        this.model = model
        this.el = el

        console.log("MADE VIEW", this.model.get("color"));
    }

    render(){
        this.button = document.createElement("button");
        this.button.innerHTML = `count is whatever`;

        this.changeColor();
        this.model.on("change:color", () => {
            console.log("CHANGE:COLOR@VIEW", this.model.get("color"));
            this.changeColor();
        });
        this.model.on("msg:custom", (content) => {
            console.log("MSG:CUSTOM@VIEW", content.color);
            this.changeColor(content.color)
        })

        this.el.classList.add("counter-widget");
        this.el.appendChild(this.button);
    }

    remove() {}

    changeColor(newColor) {
        const color = newColor || this.model.get("color");
        if (color){
            this.button.style.backgroundColor = color;
        }
    }
}

export default () => {
    let model;
    return {
        initialize(ctx) {
            model = new Model(ctx.model);
            model.initialize();
        },
        render({ el }) {
            const view = new View(model, el);
            view.render()
            return () => view.remove();
        }
    }
}