mapcomplete/UI/BigComponents/LeftControls.ts

import Combine from "../Base/Combine"
import ScrollableFullScreen from "../Base/ScrollableFullScreen"
import Translations from "../i18n/Translations"
import Toggle from "../Input/Toggle"
import MapControlButton from "../MapControlButton"
import Svg from "../../Svg"
import AllDownloads from "./AllDownloads"
import FilterView from "./FilterView"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import BackgroundMapSwitch from "./BackgroundMapSwitch"
import Lazy from "../Base/Lazy"
import { VariableUiElement } from "../Base/VariableUIElement"
import FeatureInfoBox from "../Popup/FeatureInfoBox"
import CopyrightPanel from "./CopyrightPanel"
import FeaturePipelineState from "../../Logic/State/FeaturePipelineState"

export default class LeftControls extends Combine {
    constructor(
        state: FeaturePipelineState,
        guiState: {
            currentViewControlIsOpened: UIEventSource<boolean>
            downloadControlIsOpened: UIEventSource<boolean>
            filterViewIsOpened: UIEventSource<boolean>
            copyrightViewIsOpened: UIEventSource<boolean>
        }
    ) {
        const currentViewFL = state.currentView?.layer
        const currentViewAction = new Toggle(
            new Lazy(() => {
                const feature: Store<any> = state.currentView.features.map((ffs) => ffs[0]?.feature)
                const icon = new VariableUiElement(
                    feature.map((feature) => {
                        const defaultIcon = Svg.checkbox_empty_svg()
                        if (feature === undefined) {
                            return defaultIcon
                        }
                        const tags = { ...feature.properties, button: "yes" }
                        const elem = currentViewFL.layerDef.mapRendering[0]?.GetSimpleIcon(
                            new UIEventSource(tags)
                        )
                        if (elem === undefined) {
                            return defaultIcon
                        }
                        return elem
                    })
                ).SetClass("inline-block w-full h-full")

                const featureBox = new VariableUiElement(
                    feature.map((feature) => {
                        if (feature === undefined) {
                            return undefined
                        }
                        return new Lazy(() => {
                            const tagsSource = state.allElements.getEventSourceById(
                                feature.properties.id
                            )
                            return new FeatureInfoBox(tagsSource, currentViewFL.layerDef, state, {
                                hashToShow: "currentview",
                                isShown: guiState.currentViewControlIsOpened,
                            }).SetClass("md:floating-element-width")
                        })
                    })
                )
                    .SetStyle("width: 40rem")
                    .SetClass("block")

                return new Toggle(
                    featureBox,
                    new MapControlButton(icon),
                    guiState.currentViewControlIsOpened
                )
            }).onClick(() => {
                guiState.currentViewControlIsOpened.setData(true)
            }),

            undefined,
            new UIEventSource<boolean>(
                currentViewFL !== undefined && currentViewFL?.layerDef?.tagRenderings !== null
            )
        )

        const toggledDownload = new Toggle(
            new AllDownloads(guiState.downloadControlIsOpened, state).SetClass(
                "block p-1 rounded-full md:floating-element-width"
            ),
            new MapControlButton(Svg.download_svg()).onClick(() =>
                guiState.downloadControlIsOpened.setData(true)
            ),
            guiState.downloadControlIsOpened
        )

        const downloadButtonn = new Toggle(
            toggledDownload,
            undefined,
            state.featureSwitchEnableExport.map(
                (downloadEnabled) => downloadEnabled || state.featureSwitchExportAsPdf.data,
                [state.featureSwitchExportAsPdf]
            )
        )

        const toggledFilter = new Toggle(
            new ScrollableFullScreen(
                () => Translations.t.general.layerSelection.title.Clone(),
                () =>
                    new FilterView(state.filteredLayers, state.overlayToggles, state).SetClass(
                        "block p-1"
                    ),
                "filters",
                guiState.filterViewIsOpened
            ).SetClass("rounded-lg md:floating-element-width"),
            new MapControlButton(Svg.layers_svg()).onClick(() =>
                guiState.filterViewIsOpened.setData(true)
            ),
            guiState.filterViewIsOpened
        )

        const filterButton = new Toggle(toggledFilter, undefined, state.featureSwitchFilter)

        const mapSwitch = new Toggle(
            new BackgroundMapSwitch(state, state.backgroundLayer),
            undefined,
            state.featureSwitchBackgroundSelection
        )

        // If the welcomeMessage is disabled, the copyright is hidden (as that is where the copyright is located
        const copyright = new Toggle(
            undefined,
            new Lazy(
                () =>
                    new Toggle(
                        new ScrollableFullScreen(
                            () => Translations.t.general.attribution.attributionTitle,
                            () => new CopyrightPanel(state),
                            "copyright",
                            guiState.copyrightViewIsOpened
                        ),
                        new MapControlButton(Svg.copyright_svg()).onClick(() =>
                            guiState.copyrightViewIsOpened.setData(true)
                        ),
                        guiState.copyrightViewIsOpened
                    )
            ),
            state.featureSwitchWelcomeMessage
        )

        super([currentViewAction, filterButton, downloadButtonn, copyright, mapSwitch])

        this.SetClass("flex flex-col")
    }
}