{% extends "./base_ms.html" %}
{% block plugins %}
<script type="text/javascript" src="{{ STATIC_URL }}geonode/js/ms2/utils/ms2_base_plugins.js"></script>
{% endblock %}
{% block style %}
<style>
#embedded_map {
    position: relative;
    height: 400px;
    z-index: 1029;
    overflow: hidden;
}
#mapstore2-embedded, #map, .fill {
    width: 100%;
    height: 100%;
}
._ms2_init_center {
            position: absolute;
           }
</style>
{% endblock %}
{% block app_config %}
{% autoescape off %}
<script type="text/javascript">
    const ms2_config = {{ ms2_config|default:"false" }};
    document.addEventListener('DOMContentLoaded', function () {
        $('#embedded_map').addClass('ms2');
        $('#embedded_map').html('<div class="_ms2_init_spinner _ms2_init_center"><div></div> <div class="_ms2_init_text _ms2_init_center">Loading MapStore</div>');
        MS2_PLUGINS = MS2_BASE_PLUGINS;
        MS2_PLUGINS["mobile"] = MS2_PLUGINS.desktop;
        initMapstore2Api('preview', function(MapStore2) { 
            MapStore2.create('embedded_map', {
                mode: "embedded",
                config: ms2_config,
                theme: {theme: "preview"},
                initialState: {
                    defaultState: {
                        map: {center: {x: 13, y: 45, crs: "EPSG:4326"}},
                        maptype: {mapType: maptype},
                        mousePosition: {enabled: false},
                        controls: {
                            toolbar: {
                                active: null,
                                expanded: false
                            }
                        },
                        mapInfo: {enabled: true, infoFormat: "text/html" },
                        security: {
                            token: "{{ ACCESS_TOKEN }}"
                        }
                    }
                },
                proxy: "{{ SITEURL }}proxy/?url=",
                printingEnabled: true,
                localConfig: {
                    mapLayout: {left: {sm: 300, md: 500, lg: 600}, right: {md: "41%"}, bottom: {sm: 0}},
                    geonode_url: "{{ SITEURL }}",
                    translations: '',
                    loadAfterTheme: true,
                    printUrl: "{{ SITEURL }}gs/pdf/info.json",
                    useAuthenticationRules: true,
                    authenticationRules: [{
                        "urlPattern": ".*geostore.*",
                        "method": "bearer"
                    }, {
                        "urlPattern": ".*geoserver.*",
                        "authkeyParamName": "access_token",
                        "method": "authkey"
                    }]
                },
                plugins: MS2_PLUGINS
            });
        if (ms2_config) {
                MapStore2.triggerAction({
                    type: "MAP_CONFIG_LOADED",
                    config: ms2_config,
                    legacy: !!ms2_config.map && ms2_config.map.info && ms2_config.map.info.id,
                    mapId: ms2_config.map && ms2_config.map.info && ms2_config.map.info.id
                });
            }
        let isMap = !!(ms2_config.map && ms2_config.map.info && ms2_config.map.info.id)
        createMapThumbnail = () => MapStore2.triggerAction({
            type: isMap && "GEONODE:CREATE_MAP_THUMBNAIL" || "GEONODE:CREATE_LAYER_THUMBNAIL"
        });
        if(!isMap && ms2_config &&  ms2_config.map) {
        let layer = ms2_config.map.layers[ms2_config.map.layers.length - 1];
        let id = `${layer.name}__${ms2_config.map.layers.length - 1}`;
            $("input[name='style']").click(function (ev) {
                let src = $("#legend_icon").attr("src");
                $("#legend_icon").attr("src", src.split("&STYLE")[0] + "&STYLE=" + ev.target.id);
                MapStore2.triggerAction({ type: 'UPDATE_NODE',
                node: id,
                nodeType: 'layers',
                options: {style: ev.target.id}
                });
                
            });
            
        }
        });
    });
</script>
{% endautoescape %}
{% endblock %}
