MapComplete/src/UI/SpecialVisualisations/SettingsVisualisations.ts

import { SpecialVisualizationState, SpecialVisualizationSvelte } from "../SpecialVisualization"
import SvelteUIElement from "../Base/SvelteUIElement"
import Constants from "../../Models/Constants"
import LogoutButton from "../Base/LogoutButton.svelte"
import LoginButton from "../Base/LoginButton.svelte"
import ThemeViewState from "../../Models/ThemeViewState"
import OrientationDebugPanel from "../Debug/OrientationDebugPanel.svelte"
import AllTagsPanel from "../Popup/AllTagsPanel/AllTagsPanel.svelte"
import { UIEventSource } from "../../Logic/UIEventSource"
import ClearCaches from "../Popup/ClearCaches.svelte"
import Locale from "../i18n/Locale"
import LanguageUtils from "../../Utils/LanguageUtils"
import LanguagePicker from "../InputElement/LanguagePicker.svelte"
import PendingChangesIndicator from "../BigComponents/PendingChangesIndicator.svelte"
import { Utils } from "../../Utils"
import { Feature } from "geojson"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import QrCode from "../Popup/QrCode.svelte"
import ClearGPSHistory from "../BigComponents/ClearGPSHistory.svelte"

class LanguagePickerVis extends SpecialVisualizationSvelte {
    funcName = "language_picker"
    args = []
    group = "settings"
    docs = "A component to set the language of the user interface"

    constr(state: SpecialVisualizationState): SvelteUIElement {
        const availableLanguages = Locale.showLinkToWeblate.map((showTranslations) =>
            showTranslations
                ? LanguageUtils.usedLanguagesSorted
                : state?.theme?.language ?? LanguageUtils.usedLanguagesSorted,
        )
        return new SvelteUIElement(LanguagePicker, {
            assignTo: state.userRelatedState.language,
            availableLanguages,
            preferredLanguages: state.osmConnection.userDetails.map(
                (ud) => ud?.languages ?? [],
            ),
        })
    }
}

class DisabledQuestions extends SpecialVisualizationSvelte {
    funcName = "disabled_questions"
    group = "settings"
    docs = "Shows which questions are disabled for every layer. Used in 'settings'"
    needsUrls = []
    args = []

    constr(state) {
        return new SvelteUIElement(DisabledQuestions, { state })
    }
}

class GyroscopeAllTags extends SpecialVisualizationSvelte {
    funcName = "gyroscope_all_tags"
    group = "settings"
    docs = "Shows the current tags of the GPS-representing object, used for debugging"
    args = []

    constr(): SvelteUIElement {
        return new SvelteUIElement(OrientationDebugPanel, {})
    }
}

class GpsAllTags extends SpecialVisualizationSvelte {
    funcName = "gps_all_tags"
    group = "settings"
    docs = "Shows the current tags of the GPS-representing object, used for debugging"
    args = []

    constr(state: SpecialVisualizationState): SvelteUIElement {
        const tags = (<ThemeViewState>(
            state
        )).geolocation.currentUserLocation.features.map(
            (features) => features[0]?.properties,
        )
        return new SvelteUIElement(AllTagsPanel, {
            state,
            tags,
        })
    }


}

class StorageAlLTags extends SpecialVisualizationSvelte {
    funcName = "storage_all_tags"
    group = "settings"
    docs = "Shows the current state of storage"
    args = []

    constr(state: SpecialVisualizationState): SvelteUIElement {
        const data = {}
        for (const key in localStorage) {
            data[key] = localStorage[key]
        }
        const tags = new UIEventSource(data)

        navigator.storage.estimate().then((estimate) => {
            data["__usage:current:bytes"] = estimate.usage
            data["__usage:current:human"] = Utils.toHumanByteSize(estimate.usage)
            data["__usage:quota:bytes"] = estimate.quota
            data["__usage:quota:human"] = Utils.toHumanByteSize(estimate.quota)
            tags.ping()
        })
        return new SvelteUIElement(AllTagsPanel, { state, tags })
    }
}

export class ClearCachesVis extends SpecialVisualizationSvelte {
    funcName = "clear_caches"
    docs = "A button which clears the locally downloaded data and the service worker. Login status etc will be kept"
    args = [
        {
            name: "text",
            required: true,
            doc: "The text to show on the button",
        },
    ]
    group = "settings"

    constr(
        _: SpecialVisualizationState,
        __: UIEventSource<Record<string, string>>,
        argument: string[],
    ): SvelteUIElement {
        return new SvelteUIElement(ClearCaches, {
            msg: argument[0] ?? "Clear local caches",
        })
    }
}

class LoginButtonVis extends SpecialVisualizationSvelte {
    funcName = "login_button"
    args = [
        {
            name: "force",
            doc: "Always show this button, even if logged in",
        },
        {
            name: "message",
            doc: "Message to display on the button",
        },
    ]
    docs = "Show a login button"
    group = "settings"

    constr(state: SpecialVisualizationState, _, args): SvelteUIElement {
        const force = args[0].toLowerCase()
        let msg = args[1]
        if (msg === "") {
            msg = undefined
        }
        return new SvelteUIElement(LoginButton, {
            osmConnection: state.osmConnection,
            msg,
            forceShow: force === "yes" || force === "true",
        })
    }
}

class QrLogin extends SpecialVisualizationSvelte {
    funcName = "qr_login"
    args = [
        {
            name: "text",
            doc: "Extra text on the side of the QR-code",
        },
        {
            name: "textClass",
            doc: "CSS class of the the side text",
        },
    ]
    docs = "A QR-code which shares the current URL and adds the login token. Anyone with this login token will have the same permissions as you currently have. Logging out from this session will also log them out"
    group = "settings"

    constr(
        state: SpecialVisualizationState,
        tags: UIEventSource<Record<string, string>>,
        argument: string[],
        feature: Feature,
        layer: LayerConfig,
    ): SvelteUIElement {
        const shared_oauth_cookie = state.osmConnection.getToken()
        const sideText = argument[0]
        const sideTextClass = argument[1] ?? ""
        return new SvelteUIElement(QrCode, {
            state,
            tags,
            sideText,
            sideTextClass,
            extraUrlParams: { shared_oauth_cookie },
        })
    }
}

class Logout extends SpecialVisualizationSvelte {
    funcName = "logout"
    args = []
    needsUrls = [Constants.osmAuthConfig.url]
    docs = "Shows a button where the user can log out"
    group = "settings"

    constr(state: SpecialVisualizationState): SvelteUIElement {
        return new SvelteUIElement(LogoutButton, { osmConnection: state.osmConnection })
    }
}

class PendingChanges extends SpecialVisualizationSvelte {
    funcName = "pending_changes"
    docs = "A module showing the pending changes, with the option to clear the pending changes"
    group = "settings"
    args = []

    constr(state: SpecialVisualizationState): SvelteUIElement {
        return new SvelteUIElement(PendingChangesIndicator, { state, compact: false })
    }
}

class ClearLocationHistoryVis extends SpecialVisualizationSvelte {
    group= "settings"
    funcName = "clear_location_history"
    docs = "A button to remove the travelled track information from the device"
    args = []

    constr(state) {
        return new SvelteUIElement(ClearGPSHistory, { state })
    }
}

export class SettingsVisualisations {
    public static initList(): SpecialVisualizationSvelte[] {
        return [
            new LanguagePickerVis(),

            new DisabledQuestions(),
            new GyroscopeAllTags(),
            new GpsAllTags(),
            new StorageAlLTags(),
            new ClearCachesVis(),
            new LoginButtonVis(),
            new QrLogin(),
            new Logout(),
            new PendingChanges(),
            new ClearLocationHistoryVis()
        ]
    }
}