var __decorate=this&&this.__decorate||function(e,t,s,o){var r,n=arguments.length,d=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,s,o);else for(var i=e.length-1;i>=0;i--)(r=e[i])&&(d=(n<3?r(d):n>3?r(t,s,d):r(t,s))||d);return n>3&&d&&Object.defineProperty(t,s,d),d};import{html as e,LitElement as t}from"lit";import{customElement as s,property as o,query as r}from"lit/decorators.js";import{mapAssetLegendStyle as n}from"./style";import{AssetModelUtil as d}from"@openremote/model";import{getMarkerIconAndColorFromAssetType as i}from"./util";import{Util as l}from"@openremote/core";import{InputType as p}from"@openremote/or-mwc-components/or-mwc-input";export class OrMapLegendEvent extends CustomEvent{constructor(e){super(OrMapLegendEvent.NAME,{bubbles:!1,composed:!1,detail:e})}}OrMapLegendEvent.NAME="or-map-legend-changed";let OrMapLegend=class extends t{constructor(){super(...arguments),this.assetTypes=[],this._excludedTypes=[]}static get styles(){return n}shouldUpdate(e){return e.has("assetTypes")&&(this._assetTypesInfo={},this.assetTypes.forEach(e=>{var t,s;let o=d.getAssetDescriptor(e),r=null==(t=i(o))?void 0:t.icon,n=null==(s=i(o))?void 0:s.color,p=l.getAssetTypeLabel(o);this._assetTypesInfo[e]={icon:r,color:n,label:p}})),super.shouldUpdate(e)}_onHeaderClick(){this._showLegend&&(this._showLegend.hidden=!this._showLegend.hidden)}render(){return e`
            <div id="legend">
                <div id="legend-title" @click="${()=>this._onHeaderClick()}">
                    <or-translate value="mapPage.legendTitle"></or-translate><or-icon style="cursor: pointer" icon="menu"></or-icon>
                </div>
                <div id="legend-content" hidden>
                    <ul>
                        ${this.assetTypes.map(t=>e` <li id="asset-legend" data-asset-type="${t}" style="display: flex;">
                                <or-icon
                                    icon="${this._assetTypesInfo[t].icon}"
                                    style="color: #${this._assetTypesInfo[t].color}"
                                ></or-icon>
                                <span id="asset-label" style="flex: 1">${this._assetTypesInfo[t].label}</span>
                                <or-mwc-input
                                    .type="${p.CHECKBOX}"
                                    .value="${!this._excludedTypes.includes(t)}"
                                    @or-mwc-input-changed="${e=>{e.detail.value?this._excludedTypes.splice(this._excludedTypes.indexOf(t),1):this._excludedTypes.push(t),this.dispatchEvent(new OrMapLegendEvent(this._excludedTypes))}}"
                                ></or-mwc-input>
                            </li>`)}
                    </ul>
                </div>
            </div>
        `}};__decorate([o({type:Array})],OrMapLegend.prototype,"assetTypes",void 0),__decorate([r("#legend-content")],OrMapLegend.prototype,"_showLegend",void 0),OrMapLegend=__decorate([s("or-map-legend")],OrMapLegend);export{OrMapLegend};