var __decorate=this&&this.__decorate||function(t,i,e,n){var o,a=arguments.length,r=a<3?i:null===n?n=Object.getOwnPropertyDescriptor(i,e):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,i,e,n);else for(var s=t.length-1;s>=0;s--)(o=t[s])&&(r=(a<3?o(r):a>3?o(i,e,r):o(i,e))||r);return a>3&&r&&Object.defineProperty(i,e,r),r};import{css as t,html as i}from"lit";import{customElement as e,query as n}from"lit/decorators.js";import{WidgetSettings as o}from"../util/widget-settings";import"../panels/attributes-chart-panel";import"../util/settings-panel";import{i18next as a}from"@openremote/or-translate";import{InputType as r}from"@openremote/or-mwc-components/or-mwc-input";import{when as s}from"lit/directives/when.js";import{ListType as l}from"@openremote/or-mwc-components/or-mwc-list";import{showDialog as d,OrMwcDialog as u}from"@openremote/or-mwc-components/or-mwc-dialog";import{OrAttributeBarChart as g}from"@openremote/or-attribute-barchart";import{OrChart as m}from"@openremote/or-chart";import{getAssetDescriptorIconTemplate as p}from"@openremote/or-icon";import{createRef as c,ref as h}from"lit/directives/ref.js";import{debounce as f}from"lodash";let styling=t`
    .switch-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
`,BarChartSettings=class extends o{constructor(){super(...arguments),this.timeWindowOptions=new Map,this.timePrefixOptions=[],this.intervalOptions=new Map}setTimeWindowOptions(t){this.timeWindowOptions=t}setTimePrefixOptions(t){this.timePrefixOptions=t}setIntervalOptions(t){this.intervalOptions=t}static get styles(){return[...super.styles,styling]}render(){var t,e,n,o,l,d,u;let c=this.widgetConfig.attributeSettings,h=null==(n=null==(e=null==(t=this.widgetConfig.chartOptions.options)?void 0:t.scales)?void 0:e.y)?void 0:n.min,f=null==(d=null==(l=null==(o=this.widgetConfig.chartOptions.options)?void 0:o.scales)?void 0:l.y)?void 0:d.max,w=!!(null==(u=c.rightAxisAttributes)?void 0:u.length),b=(t,e,n)=>{var o,a,r,s,l,d;let u=null==(r=null==(a=null==(o=this.widgetConfig.attributeColors)?void 0:o.find(i=>i[0].id===t.id&&i[0].name===e.name))?void 0:a[1])?void 0:r.replace("#","");if(!u){let i=null==(s=this.widgetConfig.attributeRefs)?void 0:s.findIndex(i=>i.id===t.id&&i.name===e.name);i>=0&&(u=null==(d=null==(l=m.DEFAULT_COLORS)?void 0:l[i])?void 0:d.replace("#",""))}return i`<span>${p(n,void 0,void 0,u)}</span>`},v=t=>{var i,e,n,o,r,s,l,d,u;let m=!!(null==(n=null==(e=null==(i=this.widgetConfig)?void 0:i.attributeSettings)?void 0:e.faintAttributes)?void 0:n.find(i=>i.id===t.id&&i.name===t.name)),p=null==(s=null==(r=null==(o=this.widgetConfig)?void 0:o.attributeColors)?void 0:r.find(([i,e])=>i.id===t.id&&i.name===t.name))?void 0:s[1],c=!1;if(p)c=!0;else{let i=null==(d=null==(l=this.widgetConfig)?void 0:l.attributeRefs)?void 0:d.findIndex(i=>i.id===t.id&&i.name===t.name);i>=0&&(p=g.DEFAULT_COLORS[i])}return[{icon:"arrow-up-circle",tooltip:"Order up",active:!1,disabled:0===this.widgetConfig.attributeRefs.indexOf(t)},{icon:"arrow-down-circle",tooltip:"Order down",active:!1,disabled:this.widgetConfig.attributeRefs.indexOf(t)===this.widgetConfig.attributeRefs.length-1},{icon:"calculator-variant-outline",tooltip:a.t("algorithmMethod"),active:!0,color:p,disabled:!1},{icon:"palette",tooltip:a.t("dashboard.barColor"),active:c,color:p,disabled:!1},{icon:"arrange-send-backward",tooltip:a.t("dashboard.faint"),active:m,color:p,disabled:!1},{icon:(null==(u=this.widgetConfig.attributeSettings.rightAxisAttributes)?void 0:u.includes(t))?"arrow-right-bold":"arrow-left-bold",tooltip:a.t("dashboard.toggleAxis"),active:!1,color:p,disabled:!1}]},C=Array.from(this.timeWindowOptions.keys()).map(t=>[t,a.t(t.toLowerCase())]),y=Array.from(this.intervalOptions.keys()).map(t=>[t,a.t(`intervalBy${t.toLowerCase()}`)]);return i`
            <div>
                <!-- Attribute selection -->
                <settings-panel displayName="attributes" expanded="${!0}">
                    <attributes-chart-panel .attributeRefs="${this.widgetConfig.attributeRefs}" multi onlyDataAttrs .attributeFilter="${t=>["boolean","positiveInteger","positiveNumber","number","long","integer","bigInteger","negativeInteger","negativeNumber","bigNumber","integerByte","direction"].includes(t.type)}" style="padding-bottom: 12px;"
                                      .attributeIconCallback=${b} .attributeActionCallback="${v}"
                                      @attribute-action="${t=>this.onAttributeAction(t)}"
                                      @attribute-select="${t=>this.onAttributesSelect(t)}"
                    ></attributes-chart-panel>
                </settings-panel>

                <!-- Time options -->
                <settings-panel displayName="time" expanded="${!0}">
                    <div style="padding-bottom: 12px; display: flex; flex-direction: column; gap: 6px;">
                        
                        <!-- Timeframe & interval -->
                        <or-mwc-input .type="${r.SELECT}" label="${a.t("prefixDefault")}" style="width: 100%;"
                                      .options="${this.timePrefixOptions}" value="${this.widgetConfig.defaultTimePrefixKey}"
                                      @or-mwc-input-changed="${t=>this.onTimePrefixSelect(t)}"
                        ></or-mwc-input>
                        <or-mwc-input .type="${r.SELECT}" label="${a.t("timeframeDefault")}" style="width: 100%;"
                                      .options="${C}" value="${this.widgetConfig.defaultTimeWindowKey}"
                                      @or-mwc-input-changed="${t=>this.onTimeWindowSelect(t)}"
                        ></or-mwc-input>
                        <or-mwc-input .type="${r.SELECT}" label="${a.t("withInterval")}" style="width: 100%;"
                                      .options="${y}" value="${this.widgetConfig.defaultInterval}"
                                      @or-mwc-input-changed="${t=>this.onIntervalSelect(t)}"
                        ></or-mwc-input>
                    </div>
                </settings-panel>
                
                <!-- Display options -->
                <settings-panel displayName="display" expanded="${!1}">
                    <div style="padding-bottom: 12px; display: flex; flex-direction: column; gap: 16px;">
                        <!-- Stacked -->
                        <div class="switch-container">
                            <span><or-translate value="dashboard.toggleStackView"></or-translate></span>
                            <or-mwc-input .type="${r.SWITCH}" style="margin: 0 -10px;" .value="${this.widgetConfig.stacked}"
                                          @or-mwc-input-changed="${t=>this.onDefaultStackedToggle(t)}"
                            ></or-mwc-input>
                        </div>
                        <!-- Time range selection -->
                        <div class="switch-container">
                            <span><or-translate value="dashboard.allowTimerangeSelect"></or-translate></span>
                            <or-mwc-input .type="${r.SWITCH}" style="margin: 0 -10px;" .value="${!this.widgetConfig.showTimestampControls}"
                                          @or-mwc-input-changed="${t=>this.onTimestampControlsToggle(t)}"
                            ></or-mwc-input>
                        </div>
                        <!-- Show legend -->
                        <div class="switch-container">
                            <span><or-translate value="dashboard.showLegend"></or-translate></span>
                            <or-mwc-input .type="${r.SWITCH}" style="margin: 0 -10px;" .value="${this.widgetConfig.showLegend}"
                                          @or-mwc-input-changed="${t=>this.onShowLegendToggle(t)}"
                            ></or-mwc-input>
                        </div>
                        <!-- Decimal places -->
                        <div>
                            <or-mwc-input .type="${r.NUMBER}" style="width: 100%;" .value="${this.widgetConfig.decimals}" label="${a.t("decimals")}" .min="${0}"
                                          @or-mwc-input-changed="${t=>this.onDecimalsChange(t)}"
                            ></or-mwc-input>
                        </div>
                    </div>
                </settings-panel>

                <!-- Axis configuration -->
                <settings-panel displayName="dashboard.axisConfig" expanded="${!1}">
                    <div style="padding-bottom: 12px; display: flex; flex-direction: column; gap: 16px;">

                        <!-- Left axis configuration -->
                        <div>
                            ${s(w,()=>i`
                                <div style="margin-bottom: 8px;">
                                    <span><or-translate value="dashboard.leftAxis"></or-translate></span>
                                </div>
                            `)}
                            <div style="display: flex;">
                                ${s(void 0!==f,()=>i`
                                    <or-mwc-input .type="${r.NUMBER}" label="${`${a.t("yAxis")} ${a.t("max")}`}" .value="${f}" style="width: 100%;"
                                                  @or-mwc-input-changed="${t=>this.onMinMaxValueChange("left","max",t)}"
                                    ></or-mwc-input>
                                `,()=>i`
                                    <or-mwc-input .type="${r.TEXT}" label="${`${a.t("yAxis")} ${a.t("max")}`}" disabled value="auto" style="width: 100%;"></or-mwc-input>
                                `)}
                                <or-mwc-input .type="${r.SWITCH}" style="margin: 0 -10px 0 0;" .value="${void 0!==f}"
                                              @or-mwc-input-changed="${t=>this.onMinMaxValueToggle("left","max",t)}"
                                ></or-mwc-input>
                            </div>
                            <div style="display: flex; margin-top: 12px;">
                                ${s(void 0!==h,()=>i`
                                    <or-mwc-input .type="${r.NUMBER}" label="${`${a.t("yAxis")} ${a.t("min")}`}" .value="${h}" style="width: 100%;"
                                                  @or-mwc-input-changed="${t=>this.onMinMaxValueChange("left","min",t)}"
                                    ></or-mwc-input>
                                `,()=>i`
                                    <or-mwc-input .type="${r.TEXT}" label="${`${a.t("yAxis")} ${a.t("min")}`}" disabled value="auto" style="width: 100%;"></or-mwc-input>
                                `)}
                                <or-mwc-input .type="${r.SWITCH}" style="margin: 0 -10px 0 0;" .value="${void 0!==h}"
                                              @or-mwc-input-changed="${t=>this.onMinMaxValueToggle("left","min",t)}"
                                ></or-mwc-input>
                            </div>
                        </div>

                        <!-- Right axis configuration -->
                        ${s(w,()=>{var t,e,n,o,l,d;let u=null==(n=null==(e=null==(t=this.widgetConfig.chartOptions.options)?void 0:t.scales)?void 0:e.y1)?void 0:n.min,g=null==(d=null==(l=null==(o=this.widgetConfig.chartOptions.options)?void 0:o.scales)?void 0:l.y1)?void 0:d.max;return i`
                                <div>
                                    <div style="margin-bottom: 8px;">
                                        <span><or-translate value="dashboard.rightAxis"></or-translate></span>
                                    </div>
                                    <div style="display: flex;">
                                        ${s(void 0!==g,()=>i`
                                            <or-mwc-input .type="${r.NUMBER}" label="${`${a.t("yAxis")} ${a.t("max")}`}" .value="${g}" style="width: 100%;"
                                                          @or-mwc-input-changed="${t=>this.onMinMaxValueChange("right","max",t)}"
                                            ></or-mwc-input>
                                        `,()=>i`
                                            <or-mwc-input .type="${r.TEXT}" label="${`${a.t("yAxis")} ${a.t("max")}`}" disabled="true" value="auto"
                                                          style="width: 100%;"></or-mwc-input>
                                        `)}
                                        <or-mwc-input .type="${r.SWITCH}" style="margin: 0 -10px 0 0;" .value="${void 0!==g}"
                                                      @or-mwc-input-changed="${t=>this.onMinMaxValueToggle("right","max",t)}"
                                        ></or-mwc-input>
                                    </div>
                                    <div style="display: flex; margin-top: 12px;">
                                        ${s(void 0!==u,()=>i`
                                            <or-mwc-input .type="${r.NUMBER}" label="${`${a.t("yAxis")} ${a.t("min")}`}" .value="${u}" style="width: 100%;"
                                                          @or-mwc-input-changed="${t=>this.onMinMaxValueChange("right","min",t)}"
                                            ></or-mwc-input>
                                        `,()=>i`
                                            <or-mwc-input .type="${r.TEXT}" label="${`${a.t("yAxis")} ${a.t("min")}`}" disabled="true" value="auto"
                                                          style="width: 100%;"></or-mwc-input>
                                        `)}
                                        <or-mwc-input .type="${r.SWITCH}" style="margin: 0 -10px 0 0;" .value="${void 0!==u}"
                                                      @or-mwc-input-changed="${t=>this.onMinMaxValueToggle("right","min",t)}"
                                        ></or-mwc-input>
                                    </div>
                                </div>
                            `})}
                    </div>
                </settings-panel>
            </div>
        `}onAttributeAction(t){let{attributeRef:i,action:e}=t.detail;switch(e.icon){case"palette":this.openColorPickDialog(i);break;case"arrow-right-bold":case"arrow-left-bold":this.toggleAttributeSetting("rightAxisAttributes",i);break;case"calculator-variant-outline":this.openAlgorithmMethodsDialog(i);break;case"arrange-send-backward":this.onFaintClick(i);break;case"arrow-up-circle":this.onArrowUpClick(i);break;case"arrow-down-circle":this.onArrowDownClick(i);break;default:console.warn("Unknown attribute panel action:",e)}}onFaintClick(t){var i;null!=(i=this.widgetConfig.attributeSettings).faintAttributes||(i.faintAttributes=[]),this.widgetConfig.attributeSettings.faintAttributes.findIndex(i=>i.id===t.id&&i.name===t.name)>=0?this.widgetConfig.attributeSettings.faintAttributes=this.widgetConfig.attributeSettings.faintAttributes.filter(i=>i.id!==t.id&&i.name!==t.name):this.widgetConfig.attributeSettings.faintAttributes.push(t),this.notifyConfigUpdate()}onArrowUpClick(t){let i=this.widgetConfig.attributeRefs.indexOf(t);if(i>0){let e=this.widgetConfig.attributeRefs[i-1];this.widgetConfig.attributeRefs[i-1]=t,this.widgetConfig.attributeRefs[i]=e}this.notifyConfigUpdate()}onArrowDownClick(t){let i=this.widgetConfig.attributeRefs.indexOf(t);if(i<this.widgetConfig.attributeRefs.length-1){let e=this.widgetConfig.attributeRefs[i+1];this.widgetConfig.attributeRefs[i+1]=t,this.widgetConfig.attributeRefs[i]=e}this.notifyConfigUpdate()}onAttributesSelect(t){var i,e,n,o,a,r,s,l,d;this.widgetConfig.attributeRefs.filter(i=>!t.detail.attributeRefs.find(t=>t.id===i.id&&t.name===i.name)).forEach(t=>{this.removeFromAttributeSettings(t),this.removeFromAttributeColors(t)}),this.widgetConfig.attributeRefs=t.detail.attributeRefs,null!=(d=this.widgetConfig).attributeColors||(d.attributeColors=[]),t.detail.attributeRefs.forEach((t,i)=>{var e;if(!this.widgetConfig.attributeColors.find(i=>i[0].id===t.id&&i[0].name===h.name)){let n=null!=(e=g.DEFAULT_COLORS[i])?e:"#000000";this.widgetConfig.attributeColors.push([t,n])}});let u=this.widgetConfig.attributeSettings,m=[...null!=(i=u.methodAvgAttributes)?i:[],...null!=(e=u.methodMinAttributes)?e:[],...null!=(n=u.methodMaxAttributes)?n:[],...null!=(o=u.methodDifferenceAttributes)?o:[],...null!=(a=u.methodMedianAttributes)?a:[],...null!=(r=u.methodModeAttributes)?r:[],...null!=(s=u.methodSumAttributes)?s:[],...null!=(l=u.methodCountAttributes)?l:[]];this.widgetConfig.attributeRefs.forEach(t=>{var i;m.find(i=>i.id===t.id&&i.name===t.name)||(null!=(i=this.widgetConfig.attributeSettings).methodAvgAttributes||(i.methodAvgAttributes=[]),this.widgetConfig.attributeSettings.methodAvgAttributes.push(t))}),this.notifyConfigUpdate()}removeFromAttributeSettings(t){let i=this.widgetConfig.attributeSettings;Object.keys(i).forEach(e=>{i[e]=i[e].filter(i=>i.id!==t.id&&i.name!==t.name)})}toggleAttributeSetting(t,i,e=!0){var n;null!=(n=this.widgetConfig.attributeSettings)[t]||(n[t]=[]);let o=this.widgetConfig.attributeSettings[t],a=o.findIndex(t=>t.id===i.id&&t.name===i.name);a<0?o.push(i):(o.splice(a,1),o&&0===o.length&&delete this.widgetConfig.attributeSettings[t]),e&&this.notifyConfigUpdate()}openColorPickDialog(t){var i,e;let n=null==(e=null==(i=this._attributesPanelElem)?void 0:i.shadowRoot)?void 0:e.querySelector(`#chart-color-${t.id}-${t.name}`);n&&(n.addEventListener("input",f(()=>{var i;let e=n.value;null!=(i=this.widgetConfig).attributeColors||(i.attributeColors=[]);let o=this.widgetConfig.attributeColors.find(i=>i[0].id===t.id&&i[0].name===t.name);o?o[1]=e:this.widgetConfig.attributeColors.push([t,e]),this.notifyConfigUpdate()},200)),n.click())}removeFromAttributeColors(t){this.widgetConfig.attributeColors=this.widgetConfig.attributeColors.filter(([i,e])=>i.id!==t.id||i.name!==t.name)}openAlgorithmMethodsDialog(t){let e=["methodAvgAttributes","methodCountAttributes","methodDifferenceAttributes","methodMaxAttributes","methodMedianAttributes","methodMinAttributes","methodModeAttributes","methodSumAttributes"],n=e.map(i=>{let e=this.widgetConfig.attributeSettings[i];return{text:i,value:i,data:(null==e?void 0:e.some(i=>i.id===t.id&&i.name===t.name))?i:void 0,translate:!0}}),o=c();d(new u().setContent(i`
                <div id="method-creator">
                    <or-mwc-list ${h(o)} id="method-creator-list" .type="${l.MULTI_CHECKBOX}"
                                 .listItems="${n}"
                                 .values="${n.map(t=>t.data)}"
                    ></or-mwc-list>
                </div>
            `).setHeading(a.t("algorithmMethod")).setActions([{actionName:"cancel",content:"cancel"},{default:!0,actionName:"ok",action:()=>{var i;o.value&&(e.filter(i=>{var e;return!!(null==(e=this.widgetConfig.attributeSettings[i])?void 0:e.find(i=>i.id===t.id&&i.name===t.name))}).forEach(i=>this.toggleAttributeSetting(i,t,!1)),null==(i=o.value.values)||i.forEach(i=>{this.toggleAttributeSetting(i,t,!1)}),this.notifyConfigUpdate())},content:"ok"}]).setDismissAction(null))}onTimePrefixSelect(t){this.widgetConfig.defaultTimePrefixKey=t.detail.value.toString(),this.notifyConfigUpdate()}onTimeWindowSelect(t){this.widgetConfig.defaultTimeWindowKey=t.detail.value.toString(),this.notifyConfigUpdate()}onIntervalSelect(t){this.widgetConfig.defaultInterval=t.detail.value.toString(),this.notifyConfigUpdate()}onTimestampControlsToggle(t){this.widgetConfig.showTimestampControls=!t.detail.value,this.notifyConfigUpdate()}onShowLegendToggle(t){this.widgetConfig.showLegend=t.detail.value,this.notifyConfigUpdate()}onDefaultStackedToggle(t){this.widgetConfig.stacked=t.detail.value,this.notifyConfigUpdate()}setAxisMinMaxValue(t,i,e){"left"===t?this.widgetConfig.chartOptions.options.scales.y[i]=e:this.widgetConfig.chartOptions.options.scales.y1[i]=e,this.notifyConfigUpdate()}onMinMaxValueChange(t,i,e){this.setAxisMinMaxValue(t,i,e.detail.value)}onMinMaxValueToggle(t,i,e){this.setAxisMinMaxValue(t,i,e.detail.value?100*("min"!==i):void 0)}onDecimalsChange(t){this.widgetConfig.decimals=t.detail.value,this.notifyConfigUpdate()}};__decorate([n("attributes-chart-panel")],BarChartSettings.prototype,"_attributesPanelElem",void 0),BarChartSettings=__decorate([e("barchart-settings")],BarChartSettings);export{BarChartSettings};