mapcomplete/UI/BigComponents/ExtraLinkButton.ts

import { UIElement } from "../UIElement"
import BaseUIElement from "../BaseUIElement"
import { UIEventSource } from "../../Logic/UIEventSource"
import ExtraLinkConfig from "../../Models/ThemeConfig/ExtraLinkConfig"
import Img from "../Base/Img"
import { SubtleButton } from "../Base/SubtleButton"
import Toggle from "../Input/Toggle"
import Loc from "../../Models/Loc"
import Locale from "../i18n/Locale"
import { Utils } from "../../Utils"
import Svg from "../../Svg"
import Translations from "../i18n/Translations"
import { Translation } from "../i18n/Translation"

export default class ExtraLinkButton extends UIElement {
    private readonly _config: ExtraLinkConfig
    private readonly state: {
        layoutToUse: { id: string; title: Translation }
        featureSwitchWelcomeMessage: UIEventSource<boolean>
        locationControl: UIEventSource<Loc>
    }

    constructor(
        state: {
            featureSwitchWelcomeMessage: UIEventSource<boolean>
            locationControl: UIEventSource<Loc>
            layoutToUse: { id: string; title: Translation }
        },
        config: ExtraLinkConfig
    ) {
        super()
        this.state = state
        this._config = config
    }

    protected InnerRender(): BaseUIElement {
        if (this._config === undefined) {
            return undefined
        }

        const c = this._config

        const isIframe = window !== window.top

        if (c.requirements?.has("iframe") && !isIframe) {
            return undefined
        }

        if (c.requirements?.has("no-iframe") && isIframe) {
            return undefined
        }

        let link: BaseUIElement
        const theme = this.state.layoutToUse?.id ?? ""
        const basepath = window.location.host
        const href = this.state.locationControl.map((loc) => {
            const subs = {
                ...loc,
                theme: theme,
                basepath,
                language: Locale.language.data,
            }
            return Utils.SubstituteKeys(c.href, subs)
        })

        let img: BaseUIElement = Svg.pop_out_ui()
        if (c.icon !== undefined) {
            img = new Img(c.icon).SetClass("h-6")
        }

        let text: Translation
        if (c.text === undefined) {
            text = Translations.t.general.screenToSmall.Subs({
                theme: this.state.layoutToUse.title,
            })
        } else {
            text = c.text.Clone()
        }

        link = new SubtleButton(img, text, {
            url: href,
            newTab: c.newTab,
        })

        if (c.requirements?.has("no-welcome-message")) {
            link = new Toggle(undefined, link, this.state.featureSwitchWelcomeMessage)
        }

        if (c.requirements?.has("welcome-message")) {
            link = new Toggle(link, undefined, this.state.featureSwitchWelcomeMessage)
        }

        return link
    }
}