import BaseUIElement from "../BaseUIElement"
import { UIElement } from "../UIElement"
import Translations from "../i18n/Translations"
import Combine from "./Combine"
import Img from "./Img"

/**
 * @deprecated
 */
export class SubtleButton extends UIElement {
    private readonly imageUrl: string | BaseUIElement
    private readonly message: string | BaseUIElement

    constructor(
        imageUrl: string | BaseUIElement,
        message: string | BaseUIElement
    ) {
        super()
        this.imageUrl = imageUrl
        this.message = message
    }

    protected InnerRender(): string | BaseUIElement {
        const classes = "button"
        const message = Translations.W(this.message)?.SetClass(
            "block overflow-ellipsis no-images flex-shrink"
        )
        let img
        const imgClasses =
            "block justify-center flex-none mr-4 h-11 w-11"
        if ((this.imageUrl ?? "") === "") {
            img = undefined
        } else if (typeof this.imageUrl === "string") {
            img = new Img(this.imageUrl)?.SetClass(imgClasses)
        } else {
            img = this.imageUrl?.SetClass(imgClasses)
        }
        const button = new Combine([img, message]).SetClass("flex items-center group w-full")

        this.SetClass(classes)
        return button
    }
}