MapComplete/UI/Popup/FeatureInfoBox.ts

import { UIEventSource } from "../../Logic/UIEventSource"
import EditableTagRendering from "./EditableTagRendering"
import QuestionBox from "./QuestionBox"
import Combine from "../Base/Combine"
import TagRenderingAnswer from "./TagRenderingAnswer"
import ScrollableFullScreen from "../Base/ScrollableFullScreen"
import Constants from "../../Models/Constants"
import SharedTagRenderings from "../../Customizations/SharedTagRenderings"
import BaseUIElement from "../BaseUIElement"
import { VariableUiElement } from "../Base/VariableUIElement"
import DeleteWizard from "./DeleteWizard"
import SplitRoadWizard from "./SplitRoadWizard"
import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import { Utils } from "../../Utils"
import MoveWizard from "./MoveWizard"
import Toggle from "../Input/Toggle"
import Lazy from "../Base/Lazy"
import FeaturePipelineState from "../../Logic/State/FeaturePipelineState"
import { Tag } from "../../Logic/Tags/Tag"
import Svg from "../../Svg"
import Translations from "../i18n/Translations"

export default class FeatureInfoBox extends ScrollableFullScreen {
    public constructor(
        tags: UIEventSource<any>,
        layerConfig: LayerConfig,
        state: FeaturePipelineState,
        options?: {
            hashToShow?: string
            isShown?: UIEventSource<boolean>
            setHash?: true | boolean
        }
    ) {
        if (state === undefined) {
            throw "State is undefined!"
        }
        super(
            () => FeatureInfoBox.GenerateTitleBar(tags, layerConfig, state),
            () => FeatureInfoBox.GenerateContent(tags, layerConfig, state),
            options?.hashToShow ?? tags.data.id ?? "item",
            options?.isShown,
            options
        )

        if (layerConfig === undefined) {
            throw "Undefined layerconfig"
        }
    }

    public static GenerateTitleBar(
        tags: UIEventSource<any>,
        layerConfig: LayerConfig,
        state: {}
    ): BaseUIElement {
        const title = new TagRenderingAnswer(
            tags,
            layerConfig.title ?? new TagRenderingConfig("POI"),
            state
        ).SetClass("break-words font-bold sm:p-0.5 md:p-1 sm:p-1.5 md:p-2 text-2xl")
        const titleIcons = new Combine(
            layerConfig.titleIcons.map((icon) => {
                return new TagRenderingAnswer(
                    tags,
                    icon,
                    state,
                    "block h-8 max-h-8 align-baseline box-content sm:p-0.5 titleicon"
                )
            })
        ).SetClass("flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2")

        return new Combine([
            new Combine([title, titleIcons]).SetClass(
                "flex flex-col sm:flex-row flex-grow justify-between"
            ),
        ])
    }

    public static GenerateContent(
        tags: UIEventSource<any>,
        layerConfig: LayerConfig,
        state: FeaturePipelineState
    ): BaseUIElement {
        let questionBoxes: Map<string, QuestionBox> = new Map<string, QuestionBox>()
        const t = Translations.t.general
        const allGroupNames = Utils.Dedup(layerConfig.tagRenderings.map((tr) => tr.group))
        if (state?.featureSwitchUserbadge?.data ?? true) {
            const questionSpecs = layerConfig.tagRenderings.filter((tr) => tr.id === "questions")
            for (const groupName of allGroupNames) {
                const questions = layerConfig.tagRenderings.filter((tr) => tr.group === groupName)
                const questionSpec = questionSpecs.filter((tr) => tr.group === groupName)[0]
                const questionBox = new QuestionBox(state, {
                    tagsSource: tags,
                    tagRenderings: questions,
                    units: layerConfig.units,
                    showAllQuestionsAtOnce:
                        questionSpec?.freeform?.helperArgs["showAllQuestions"] ??
                        state.featureSwitchShowAllQuestions,
                })
                questionBoxes.set(groupName, questionBox)
            }
        }

        const withQuestion = layerConfig.tagRenderings.filter(
            (tr) => tr.question !== undefined
        ).length

        const allRenderings: BaseUIElement[] = [
            new VariableUiElement(
                tags
                    .map((data) => data[Tag.newlyCreated.key])
                    .map((isCreated) => {
                        if (isCreated !== Tag.newlyCreated.value) {
                            return undefined
                        }
                        const els = []
                        const thanks = new Combine([
                            Svg.party_svg().SetClass(
                                "w-12 h-12 shrink-0 p-1 m-1 bg-white rounded-full block"
                            ),
                            t.newlyCreated,
                        ]).SetClass("flex w-full thanks content-center")
                        els.push(thanks)
                        if (withQuestion > 0) {
                            els.push(t.feelFreeToSkip)
                        }

                        return new Combine(els).SetClass("pb-4 mb-4 border-b block border-black")
                    })
            ),
        ]
        for (let i = 0; i < allGroupNames.length; i++) {
            const groupName = allGroupNames[i]

            const trs = layerConfig.tagRenderings.filter((tr) => tr.group === groupName)
            const renderingsForGroup: (EditableTagRendering | BaseUIElement)[] = []
            const innerClasses =
                "block w-full break-word text-default m-1 p-1 border-b border-gray-200 mb-2 pb-2"
            for (const tr of trs) {
                if (tr.question === null || tr.id === "questions") {
                    // This is a question box!
                    const questionBox = questionBoxes.get(tr.group)
                    questionBoxes.delete(tr.group)

                    if (tr.render !== undefined) {
                        questionBox.SetClass("text-sm")
                        const renderedQuestion = new TagRenderingAnswer(
                            tags,
                            tr,
                            state,
                            tr.group + " questions",
                            "",
                            {
                                specialViz: new Map<string, BaseUIElement>([
                                    ["questions", questionBox],
                                ]),
                            }
                        )
                        const possiblyHidden = new Toggle(
                            renderedQuestion,
                            undefined,
                            questionBox.restingQuestions.map((ls) => ls?.length > 0)
                        )
                        renderingsForGroup.push(possiblyHidden)
                    } else {
                        renderingsForGroup.push(questionBox)
                    }
                } else {
                    let classes = innerClasses
                    let isHeader = renderingsForGroup.length === 0 && i > 0
                    if (isHeader) {
                        // This is the first element of a group!
                        // It should act as header and be sticky
                        classes = ""
                    }

                    const etr = new EditableTagRendering(tags, tr, layerConfig.units, state, {
                        innerElementClasses: innerClasses,
                    })
                    if (isHeader) {
                        etr.SetClass("sticky top-0")
                    }
                    renderingsForGroup.push(etr)
                }
            }

            allRenderings.push(...renderingsForGroup)
        }
        allRenderings.push(
            new Toggle(
                new Lazy(() =>
                    FeatureInfoBox.createEditElements(questionBoxes, layerConfig, tags, state)
                ),
                undefined,
                state.featureSwitchUserbadge
            )
        )

        return new Combine(allRenderings).SetClass("block")
    }

    /**
     * All the edit elements, together (note that the question boxes are passed though)
     * @param questionBoxes
     * @param layerConfig
     * @param tags
     * @param state
     * @private
     */
    private static createEditElements(
        questionBoxes: Map<string, QuestionBox>,
        layerConfig: LayerConfig,
        tags: UIEventSource<any>,
        state: FeaturePipelineState
    ): BaseUIElement {
        let editElements: BaseUIElement[] = []
        questionBoxes.forEach((questionBox) => {
            editElements.push(questionBox)
        })

        if (layerConfig.allowMove) {
            editElements.push(
                new VariableUiElement(
                    tags
                        .map((tags) => tags.id)
                        .map((id) => {
                            const feature = state.allElements.ContainingFeatures.get(id)
                            if (feature === undefined) {
                                return "This feature is not register in the state.allElements and cannot be moved"
                            }
                            return new MoveWizard(feature, state, layerConfig.allowMove)
                        })
                ).SetClass("text-base")
            )
        }

        if (layerConfig.deletion) {
            editElements.push(
                new VariableUiElement(
                    tags
                        .map((tags) => tags.id)
                        .map((id) => new DeleteWizard(id, state, layerConfig.deletion))
                ).SetClass("text-base")
            )
        }

        if (layerConfig.allowSplit) {
            editElements.push(
                new VariableUiElement(
                    tags.map((tags) => tags.id).map((id) => new SplitRoadWizard(id, state))
                ).SetClass("text-base")
            )
        }

        editElements.push(
            new VariableUiElement(
                state.osmConnection.userDetails
                    .map((ud) => ud.csCount)
                    .map(
                        (csCount) => {
                            if (
                                csCount <= Constants.userJourney.historyLinkVisible &&
                                state.featureSwitchIsDebugging.data == false &&
                                state.featureSwitchIsTesting.data === false
                            ) {
                                return undefined
                            }

                            return new TagRenderingAnswer(
                                tags,
                                SharedTagRenderings.SharedTagRendering.get("last_edit"),
                                state
                            )
                        },
                        [state.featureSwitchIsDebugging, state.featureSwitchIsTesting]
                    )
            )
        )

        editElements.push(
            Toggle.If(state.featureSwitchIsDebugging, () => {
                const config_all_tags: TagRenderingConfig = new TagRenderingConfig(
                    { render: "{all_tags()}" },
                    ""
                )
                const config_download: TagRenderingConfig = new TagRenderingConfig(
                    { render: "{export_as_geojson()}" },
                    ""
                )
                const config_id: TagRenderingConfig = new TagRenderingConfig(
                    { render: "{open_in_iD()}" },
                    ""
                )

                return new Combine([
                    new TagRenderingAnswer(tags, config_all_tags, state),
                    new TagRenderingAnswer(tags, config_download, state),
                    new TagRenderingAnswer(tags, config_id, state),
                    "This is layer " + layerConfig.id,
                ])
            })
        )

        return new Combine(editElements).SetClass("flex flex-col")
    }
}