import { SubtleButton } from "../Base/SubtleButton"
import BaseUIElement from "../BaseUIElement"
import Svg from "../../Svg"
import { OsmConnection, OsmServiceState } from "../../Logic/Osm/OsmConnection"
import { VariableUiElement } from "../Base/VariableUIElement"
import Loading from "../Base/Loading"
import Translations from "../i18n/Translations"
import { Store } from "../../Logic/UIEventSource"
import Combine from "../Base/Combine"
import { Translation } from "../i18n/Translation"

class LoginButton extends SubtleButton {
    constructor(
        text: BaseUIElement | string,
        state: {
            osmConnection: OsmConnection
        },
        icon?: BaseUIElement | string
    ) {
        super(icon ?? Svg.login_ui(), text)
        this.onClick(() => {
            state.osmConnection.AttemptLogin()
        })
    }
}

export class LoginToggle extends VariableUiElement {
    /**
     * Constructs an element which shows 'el' if the user is logged in
     * If not logged in, 'text' is shown on the button which invites to login.
     *
     * If logging in is not possible for some reason, an appropriate error message is shown
     *
     * State contains the 'osmConnection' to work with
     */
    constructor(
        el: BaseUIElement,
        text: BaseUIElement | string,
        state: {
            readonly osmConnection: OsmConnection
            readonly featureSwitchUserbadge: Store<boolean>
        }
    ) {
        const loading = new Loading("Trying to log in...")
        const login = text === undefined ? undefined : new LoginButton(text, state)
        const t = Translations.t.general
        const offlineModes: Partial<Record<OsmServiceState, Translation>> = {
            offline: t.loginFailedOfflineMode,
            unreachable: t.loginFailedUnreachableMode,
            readonly: t.loginFailedReadonlyMode,
        }

        super(
            state.osmConnection.loadingStatus.map(
                (osmConnectionState) => {
                    if (state.featureSwitchUserbadge.data == false) {
                        // All features to login with are disabled
                        return undefined
                    }

                    const apiState = state.osmConnection.apiIsOnline.data
                    const apiTranslation = offlineModes[apiState]
                    if (apiTranslation !== undefined) {
                        return new Combine([
                            Svg.invalid_svg().SetClass("w-8 h-8 m-2 shrink-0"),
                            apiTranslation,
                        ]).SetClass("flex items-center alert max-w-64")
                    }

                    if (osmConnectionState === "loading") {
                        return loading
                    }
                    if (osmConnectionState === "not-attempted") {
                        return login
                    }
                    if (osmConnectionState === "logged-in") {
                        return el
                    }

                    // Error!
                    return new LoginButton(
                        Translations.t.general.loginFailed,
                        state,
                        Svg.invalid_svg()
                    )
                },
                [state.featureSwitchUserbadge, state.osmConnection.apiIsOnline]
            )
        )
    }
}