MapComplete/UI/ImportFlow/LoginToImport.ts

import Combine from "../Base/Combine";
import {FlowStep} from "./FlowStep";
import UserRelatedState from "../../Logic/State/UserRelatedState";
import {Store, UIEventSource} from "../../Logic/UIEventSource";
import Translations from "../i18n/Translations";
import Title from "../Base/Title";
import {VariableUiElement} from "../Base/VariableUIElement";
import {LoginToggle} from "../Popup/LoginButton";
import Img from "../Base/Img";
import Constants from "../../Models/Constants";
import Toggle from "../Input/Toggle";
import {SubtleButton} from "../Base/SubtleButton";
import Svg from "../../Svg";
import MoreScreen from "../BigComponents/MoreScreen";
import CheckBoxes from "../Input/Checkboxes";

export default class LoginToImport extends Combine implements FlowStep<UserRelatedState> {
    readonly IsValid: Store<boolean>;
    readonly Value: Store<UserRelatedState>;

    private static readonly whitelist = [15015689];
    
    constructor(state: UserRelatedState) {
        const t = Translations.t.importHelper.login
        const check = new CheckBoxes([new VariableUiElement(state.osmConnection.userDetails.map(ud => t.loginIsCorrect.Subs(ud)))])
        const isValid = state.osmConnection.userDetails.map(ud =>
            LoginToImport.whitelist.indexOf(ud.uid) >= 0 || ud.csCount >= Constants.userJourney.importHelperUnlock)
        super([
            new Title(t.userAccountTitle),
            new LoginToggle(
                new VariableUiElement(state.osmConnection.userDetails.map(ud => {
                    if (ud === undefined) {
                        return undefined
                    }
                    return new Combine([
                        new Img(ud.img ?? "./assets/svgs/help.svg").SetClass("w-16 h-16 rounded-full"),
                        t.loggedInWith.Subs(ud),
                        new SubtleButton(Svg.logout_svg().SetClass("h-8"), Translations.t.general.logout)
                            .onClick(() => state.osmConnection.LogOut()),
                        check
                    ]);
                })),
                t.loginRequired,
                state
            ),
            new Toggle(undefined,
                new Combine(
                    [t.lockNotice.Subs(Constants.userJourney).SetClass("alert"),
                        MoreScreen.CreateProffessionalSerivesButton()])
                , isValid)
        ])
        this.Value = new UIEventSource<UserRelatedState>(state)
        this.IsValid = isValid.map(isValid => isValid && check.GetValue().data.length > 0, [check.GetValue()]);
    }
}