colorshell/src/runner/widgets/ResultWidget.tsx

import { Accessor, With } from "ags";
import { register } from "ags/gobject";
import { Gtk } from "ags/gtk4";
import { variableToBoolean } from "../../modules/utils";

import Pango from "gi://Pango?version=1.0";


export { ResultWidget, ResultWidgetProps };

type ResultWidgetProps = {
    icon?: string | Accessor<string> | JSX.Element | Accessor<JSX.Element>;
    title: string | Accessor<string>;
    description?: string | Accessor<string>;
    closeOnClick?: boolean;
    setup?: () => void;
    actionClick?: () => void;
    visible?: boolean;
};

@register({ GTypeName: "ResultWidget" })
class ResultWidget extends Gtk.Box {

    public readonly actionClick: () => void;
    public readonly setup?: () => void;
    public icon?: (string | Accessor<string> | JSX.Element | Accessor<JSX.Element>);
    public closeOnClick: boolean = true;


    constructor(props: ResultWidgetProps) {
        super();

        this.add_css_class("result");

        this.visible = props.visible ?? true;
        this.hexpand = true;
        this.icon = props.icon;
        this.setup = props.setup;
        this.closeOnClick = props.closeOnClick ?? true;
        this.actionClick = () => props.actionClick?.();

        if(this.icon !== undefined) {
            if(this.icon instanceof Accessor) {
                if(typeof this.icon.get() === "string") {
                    this.prepend(<Gtk.Image iconName={
                        this.icon as Accessor<string>
                    } /> as Gtk.Image);
                } else {
                    this.prepend(<Gtk.Box>
                        <With value={this.icon as Accessor<Gtk.Widget>}>
                            {(widget) => widget}
                        </With>
                    </Gtk.Box> as Gtk.Box);
                }
            } else {
                if(typeof this.icon === "string") 
                    this.prepend(<Gtk.Image iconName={this.icon as string} /> as Gtk.Image);
                else 
                    this.prepend(this.icon as Gtk.Widget);
            }
        }

        this.append(<Gtk.Box orientation={Gtk.Orientation.VERTICAL} valign={Gtk.Align.CENTER}>
            <Gtk.Label class={"title"} xalign={0} ellipsize={Pango.EllipsizeMode.END}
              label={props.title} />

            <Gtk.Label class={"description"} visible={variableToBoolean(props.description)}
              ellipsize={Pango.EllipsizeMode.END} xalign={0} label={props.description ?? ""} />
        </Gtk.Box> as Gtk.Box);
    }
}