mapcomplete/UI/ImportFlow/ImportHelperGui.ts

import Combine from "../Base/Combine";
import Toggle from "../Input/Toggle";
import LanguagePicker from "../LanguagePicker";
import UserRelatedState from "../../Logic/State/UserRelatedState";
import BaseUIElement from "../BaseUIElement";
import MinimapImplementation from "../Base/MinimapImplementation";
import Translations from "../i18n/Translations";
import {FlowPanelFactory} from "./FlowStep";
import {RequestFile} from "./RequestFile";
import {PreviewAttributesPanel} from "./PreviewPanel";
import ConflationChecker from "./ConflationChecker";
import {AskMetadata} from "./AskMetadata";
import {ConfirmProcess} from "./ConfirmProcess";
import {CreateNotes} from "./CreateNotes";
import {VariableUiElement} from "../Base/VariableUIElement";
import List from "../Base/List";
import {CompareToAlreadyExistingNotes} from "./CompareToAlreadyExistingNotes";
import Introdution from "./Introdution";
import LoginToImport from "./LoginToImport";
import {MapPreview} from "./MapPreview";
import LeftIndex from "../Base/LeftIndex";
import {SubtleButton} from "../Base/SubtleButton";
import SelectTheme from "./SelectTheme";

export default class ImportHelperGui extends LeftIndex {
    constructor() {
        const state = new UserRelatedState(undefined)
        const t =  Translations.t.importHelper;
        const {flow, furthestStep, titles} =
            FlowPanelFactory
                .start(t.introduction, new Introdution())
                .then(t.login, _ => new LoginToImport(state))
               .then(t.selectFile, _ => new RequestFile())
               .then(t.previewAttributes, geojson => new PreviewAttributesPanel(state, geojson))
               .then(t.mapPreview, geojson => new MapPreview(state, geojson))
               .then(t.selectTheme, v => new SelectTheme(v))
               .then(t.compareToAlreadyExistingNotes, v => new CompareToAlreadyExistingNotes(state, v))
               .then(t.conflationChecker, v => new ConflationChecker(state, v))
               .then(t.confirmProcess, v  => new ConfirmProcess(v))
               .then(t.askMetadata, (v) => new AskMetadata(v))
               .finish(t.createNotes.title, v => new CreateNotes(state, v));

        const toc = new List(
            titles.map((title, i) => new VariableUiElement(furthestStep.map(currentStep => {
                if (i > currentStep) {
                    return new Combine([title]).SetClass("subtle");
                }
                if (i == currentStep) {
                    return new Combine([title]).SetClass("font-bold");
                }
                if (i < currentStep) {
                    return title
                }


            })))
            , true)

        const leftContents: BaseUIElement[] = [
            new SubtleButton(undefined, t.gotoImportViewer, {
                url: "import_viewer.html"
            }),
            toc,
            new Toggle(t.testMode.SetClass("block alert"), undefined, state.featureSwitchIsTesting),
            new LanguagePicker(Translations.t.importHelper.title.SupportedLanguages(), "")?.SetClass("mt-4 self-end flex-col"),
        ].map(el => el?.SetClass("pl-4"))

        super(
            leftContents,
            flow)

    }

}

MinimapImplementation.initialize()
new ImportHelperGui().AttachTo("main")