mapcomplete/UI/ImportFlow/SelectTheme.ts

import {FlowStep} from "./FlowStep";
import Combine from "../Base/Combine";
import {Store} from "../../Logic/UIEventSource";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import {InputElement} from "../Input/InputElement";
import {AllKnownLayouts} from "../../Customizations/AllKnownLayouts";
import {FixedInputElement} from "../Input/FixedInputElement";
import Img from "../Base/Img";
import Title from "../Base/Title";
import {RadioButton} from "../Input/RadioButton";
import {And} from "../../Logic/Tags/And";
import {VariableUiElement} from "../Base/VariableUIElement";
import Toggleable from "../Base/Toggleable";
import {BBox} from "../../Logic/BBox";
import BaseUIElement from "../BaseUIElement";
import PresetConfig from "../../Models/ThemeConfig/PresetConfig";
import List from "../Base/List";
import Translations from "../i18n/Translations";

export default class SelectTheme extends Combine implements FlowStep<{
    features: any[],
    theme: string,
    layer: LayerConfig,
    bbox: BBox,
}> {

    public readonly Value: Store<{
        features: any[],
        theme: string,
        layer: LayerConfig,
        bbox: BBox,
    }>;
    public readonly IsValid: Store<boolean>;

    constructor(params: ({ features: any[], layer: LayerConfig, bbox: BBox, })) {
        const t = Translations.t.importHelper.selectTheme
        let options: InputElement<string>[] = AllKnownLayouts.layoutsList
            .filter(th => th.layers.some(l => l.id === params.layer.id))
            .filter(th => th.id !== "personal")
            .map(th => new FixedInputElement<string>(
                new Combine([
                    new Img(th.icon).SetClass("block h-12 w-12 br-4"),
                    new Title(th.title)
                ]).SetClass("flex items-center"),
                th.id))


        const themeRadios = new RadioButton<string>(options, {
            selectFirstAsDefault: false
        })


        const applicablePresets = themeRadios.GetValue().map(theme => {
            if (theme === undefined) {
                return []
            }
            // we get the layer with the correct ID via the actual theme config, as the actual theme might have different presets due to overrides
            const themeConfig = AllKnownLayouts.layoutsList.find(th => th.id === theme)
            const layer = themeConfig.layers.find(l => l.id === params.layer.id)
            return layer.presets
        })


        const nonMatchedElements = applicablePresets.map(presets => {
            if (presets === undefined || presets.length === 0) {
                return undefined
            }
            return params.features.filter(feat => !presets.some(preset => new And(preset.tags).matchesProperties(feat.properties)))
        })

        super([
            new Title(t.title),
           t.intro,
            themeRadios,
            new VariableUiElement(applicablePresets.map(applicablePresets => {
                if (themeRadios.GetValue().data === undefined) {
                    return undefined
                }
                if (applicablePresets === undefined || applicablePresets.length === 0) {
                    return t.noMatchingPresets.SetClass("alert")
                }
            }, [themeRadios.GetValue()])),

            new VariableUiElement(nonMatchedElements.map(unmatched => SelectTheme.nonMatchedElementsPanel(unmatched, applicablePresets.data), [applicablePresets]))
        ]);
        this.SetClass("flex flex-col")

        this.Value = themeRadios.GetValue().map(theme => ({
            features: params.features,
            layer: params.layer,
            bbox: params.bbox,
            theme
        }))

        this.IsValid = this.Value.map(obj => {
            if (obj === undefined) {
                return false;
            }
            if ([obj.theme, obj.features].some(v => v === undefined)) {
                return false;
            }
            if (applicablePresets.data === undefined || applicablePresets.data.length === 0) {
                return false
            }
            if ((nonMatchedElements.data?.length ?? 0) > 0) {
                return false;
            }

            return true;

        }, [applicablePresets])
    }

    private static nonMatchedElementsPanel(unmatched: any[], applicablePresets: PresetConfig[]): BaseUIElement {
        if (unmatched === undefined || unmatched.length === 0) {
            return
        }
  const t = Translations.t.importHelper.selectTheme
      
        const applicablePresetsOverview = applicablePresets.map(preset => 
            t.needsTags.Subs(
                {title: preset.title, 
                    tags:preset.tags.map(t => t.asHumanString()).join(" & ") })
                .SetClass("thanks")
        );

        const unmatchedPanels: BaseUIElement[] = []
        for (const feat of unmatched) {
            const parts: BaseUIElement[] = []
            parts.push(new Combine(Object.keys(feat.properties).map(k => 
                k+"="+feat.properties[k]
            )).SetClass("flex flex-col"))

            for (const preset of applicablePresets) {
                const tags = new And(preset.tags).asChange({})
                const missing = []
                for (const {k, v} of tags) {
                    if (preset[k] === undefined) {
                        missing.push(t.missing.Subs({k,v}))
                    } else if (feat.properties[k] !== v) {
                        missing.push(t.misMatch.Subs({k, v, properties: feat.properties}))
                    }
                }

                if (missing.length > 0) {
                    parts.push(
                        new Combine([
                            t.notApplicable.Subs(preset),
                            new List(missing)
                        ]).SetClass("flex flex-col alert")
                    )
                }

            }

            unmatchedPanels.push(new Combine(parts).SetClass("flex flex-col"))
        }

        return new Combine([
            t.displayNonMatchingCount.Subs(unmatched).SetClass("alert"),
            ...applicablePresetsOverview,
            new Toggleable(new Title(t.unmatchedTitle),
                new Combine(unmatchedPanels))
        ]).SetClass("flex flex-col")

    }


}