mapcomplete/UI/BigComponents/FilterView.ts

import {Utils} from "../../Utils";
import {FixedInputElement} from "../Input/FixedInputElement";
import {RadioButton} from "../Input/RadioButton";
import {VariableUiElement} from "../Base/VariableUIElement";
import Toggle from "../Input/Toggle";
import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
import LayerConfig from "../../Customizations/JSON/LayerConfig";
import {Translation} from "../i18n/Translation";
import Svg from "../../Svg";
import FilterConfig from "../../Customizations/JSON/FilterConfig";
import {TagsFilter} from "../../Logic/Tags/TagsFilter";
import {And} from "../../Logic/Tags/And";
import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";

/**
 * Shows the filter
 */

export default class FilterView extends VariableUiElement {
    constructor(filteredLayer) {
        super(
            filteredLayer.map((filteredLayers) =>
                filteredLayers.map(FilterView.createOneFilteredLayerElement)
            )
        );
    }

    static createOneFilteredLayerElement(filteredLayer) {
        const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem";

        const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle);
        const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
            iconStyle
        );

        if (filteredLayer.layerDef.name === undefined) {
            return;
        }


        const name: Translation = Translations.WT(
            filteredLayer.layerDef.name
        )?.Clone();

        const styledNameChecked = name
            .Clone()
            .SetStyle("font-size:large;padding-left:1.25rem");

        const styledNameUnChecked = name
            .Clone()
            .SetStyle("font-size:large;padding-left:1.25rem");

        const style =
            "display:flex;align-items:center;color:#007759;padding:0.5rem 0;";
        const layerChecked = new Combine([icon, styledNameChecked])
            .SetStyle(style)
            .onClick(() => filteredLayer.isDisplayed.setData(false));

        const layerNotChecked = new Combine([iconUnselected, styledNameUnChecked])
            .SetStyle(style)
            .onClick(() => filteredLayer.isDisplayed.setData(true));

        
        const filterPanel: BaseUIElement = FilterView.createFilterPanel(filteredLayer)
        
        return new Toggle(
            new Combine([layerChecked, filterPanel]),
            layerNotChecked,
            filteredLayer.isDisplayed
        );
    }
    
    static createFilterPanel(flayer: {
        layerDef: LayerConfig,
        appliedFilters: UIEventSource<TagsFilter>
    }): BaseUIElement{
        const layer = flayer.layerDef
        if(layer.filters.length === 0){
            return undefined;
        }
        
        let listFilterElements: [BaseUIElement, UIEventSource<TagsFilter>][] = layer.filters.map(
            FilterView.createFilter
        );

        const update = () => {
            let listTagsFilters = Utils.NoNull(
                listFilterElements.map((input) => input[1].data)
            );
            flayer.appliedFilters.setData(new And(listTagsFilters));
        };

        listFilterElements.forEach((inputElement) =>
            inputElement[1].addCallback((_) => update())
        );

        return new Combine(listFilterElements.map(input => input[0].SetClass("mt-3")))
            .SetClass("flex flex-col ml-8 bg-gray-300 rounded-xl p-2")

    }

    static createFilter(filterConfig: FilterConfig): [BaseUIElement, UIEventSource<TagsFilter>] {
        if (filterConfig.options.length === 1) {
            let option = filterConfig.options[0];

            const icon = Svg.checkbox_filled_svg().SetClass("block mr-2");
            const iconUnselected = Svg.checkbox_empty_svg().SetClass("block mr-2");

            const toggle = new Toggle(
                new Combine([icon, option.question.Clone()]).SetClass("flex"),
                new Combine([iconUnselected, option.question.Clone()]).SetClass("flex")
            )
                .ToggleOnClick()
                .SetClass("block m-1")

            return [toggle, toggle.isEnabled.map(enabled => enabled ? option.osmTags : undefined)]
        }

        let options = filterConfig.options;

        const radio = new RadioButton(
            options.map(
                (option) =>
                    new FixedInputElement(option.question.Clone(), option.osmTags)
            ),
            {
                dontStyle: true
            }
        );
        return [radio, radio.GetValue()]
    }
}