var __decorate=this&&this.__decorate||function(t,e,i,a){var n,o=arguments.length,r=o<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,a);else for(var l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(e,i,r):n(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};import{css as t,html as e}from"lit";import{customElement as i,query as a}from"lit/decorators.js";import{WidgetSettings as n}from"../util/widget-settings";import"../panels/attributes-chart-panel";import"../util/settings-panel";import{i18next as o}from"@openremote/or-translate";import{InputType as r}from"@openremote/or-mwc-components/or-mwc-input";import{when as l}from"lit/directives/when.js";import{ListType as s}from"@openremote/or-mwc-components/or-mwc-list";import{showDialog as d,OrMwcDialog as g}from"@openremote/or-mwc-components/or-mwc-dialog";import{OrAttributeBarChart as u}from"@openremote/or-attribute-barchart";import{OrChart as m}from"@openremote/or-chart";import{getAssetDescriptorIconTemplate as f}from"@openremote/or-icon";import{createRef as h,ref as c}from"lit/directives/ref.js";import p from"lodash.debounce";let styling=t`
    .switch-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
`,BarChartSettings=class extends n{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,i,a,n,s,d,g;let h=this.widgetConfig.attributeSettings,c=null==(a=null==(i=null==(t=this.widgetConfig.chartOptions.options)?void 0:t.scales)?void 0:i.y)?void 0:a.min,p=null==(d=null==(s=null==(n=this.widgetConfig.chartOptions.options)?void 0:n.scales)?void 0:s.y)?void 0:d.max,v=!!(null==(g=h.rightAxisAttributes)?void 0:g.length),b=(t,i,a)=>{var n,o,r,l,s,d;let g=null==(r=null==(o=null==(n=this.widgetConfig.attributeColors)?void 0:n.find(e=>e[0].id===t.id&&e[0].name===i.name))?void 0:o[1])?void 0:r.replace("#","");if(!g){let e=null==(l=this.widgetConfig.attributeRefs)?void 0:l.findIndex(e=>e.id===t.id&&e.name===i.name);e>=0&&(g=null==(d=null==(s=m.DEFAULT_COLORS)?void 0:s[e%m.DEFAULT_COLORS.length])?void 0:d.replace("#",""))}return e`<span>${f(a,void 0,void 0,g)}</span>`},w=t=>{var e,i,a,n,r,l,s,d,g;let m=!!(null==(a=null==(i=null==(e=this.widgetConfig)?void 0:e.attributeSettings)?void 0:i.faintAttributes)?void 0:a.find(e=>e.id===t.id&&e.name===t.name)),f=null==(l=null==(r=null==(n=this.widgetConfig)?void 0:n.attributeColors)?void 0:r.find(([e,i])=>e.id===t.id&&e.name===t.name))?void 0:l[1],h=!1;if(f)h=!0;else{let e=null==(d=null==(s=this.widgetConfig)?void 0:s.attributeRefs)?void 0:d.findIndex(e=>e.id===t.id&&e.name===t.name);e>=0&&(f=u.DEFAULT_COLORS[e%u.DEFAULT_COLORS.length])}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:o.t("algorithmMethod"),active:!0,color:f,disabled:!1},{icon:"palette",tooltip:o.t("dashboard.barColor"),active:h,color:f,disabled:!1},{icon:"arrange-send-backward",tooltip:o.t("dashboard.faint"),active:m,color:f,disabled:!1},{icon:(null==(g=this.widgetConfig.attributeSettings.rightAxisAttributes)?void 0:g.includes(t))?"arrow-right-bold":"arrow-left-bold",tooltip:o.t("dashboard.toggleAxis"),active:!1,color:f,disabled:!1}]},C=this.timePrefixOptions.map(t=>({value:t,label:o.t(t)})),x=Array.from(this.timeWindowOptions.keys()).map(t=>({value:t,label:o.t(t.toLowerCase())})),y=Array.from(this.intervalOptions.keys()).map(t=>({value:t,label:o.t(`intervalBy${t.toLowerCase()}`)}));return e`
            <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="${w}"
                                      @attribute-action="${t=>this.onAttributeAction(t)}"
                                      @attribute-replace="${t=>this.onAttributeReplace(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-vaadin-select .items=${C} value=${this.widgetConfig.defaultTimePrefixKey}
                                          @change=${t=>this.onTimePrefixSelect(t)}>
                            <or-translate slot="label" value="prefixDefault"></or-translate>
                        </or-vaadin-select>
                        <or-vaadin-select .items=${x} value=${this.widgetConfig.defaultTimeWindowKey}
                                          @change=${t=>this.onTimeWindowSelect(t)}>
                            <or-translate slot="label" value="timeframeDefault"></or-translate>
                        </or-vaadin-select>
                        <or-vaadin-select .items=${y} value=${this.widgetConfig.defaultInterval}
                                          @change=${t=>this.onIntervalSelect(t)}>
                            <or-translate slot="label" value="withInterval"></or-translate>
                        </or-vaadin-select>
                    </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-vaadin-number-field min="0" value=${this.widgetConfig.decimals}
                                                    @change=${t=>this.onDecimalsChange(t)}>
                                <or-translate slot="label" value="decimals"></or-translate>
                            </or-vaadin-number-field>
                        </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>
                            ${l(v,()=>e`
                                <div style="margin-bottom: 8px;">
                                    <span><or-translate value="dashboard.leftAxis"></or-translate></span>
                                </div>
                            `)}
                            <div style="display: flex; align-items: baseline;">
                                ${l(void 0!==p,()=>e`
                                    <or-vaadin-number-field value=${p} @change=${t=>this.onMinMaxValueChange("left","max",t)}>
                                        <span slot="label"><or-translate value="yAxis"></or-translate> <or-translate value="max"></or-translate></span>
                                    </or-vaadin-number-field>
                                `,()=>e`
                                    <or-vaadin-text-field value="auto" readonly>
                                        <span slot="label"><or-translate value="yAxis"></or-translate> <or-translate value="max"></or-translate></span>
                                    </or-vaadin-text-field>
                                `)}
                                <or-mwc-input .type="${r.SWITCH}" style="margin: 0 -10px 0 0;" .value="${void 0!==p}"
                                              @or-mwc-input-changed="${t=>this.onMinMaxValueToggle("left","max",t)}"
                                ></or-mwc-input>
                            </div>
                            <div style="display: flex; align-items: baseline; margin-top: 12px;">
                                ${l(void 0!==c,()=>e`
                                    <or-vaadin-number-field value=${c} @change=${t=>this.onMinMaxValueChange("left","min",t)}>
                                        <span slot="label"><or-translate value="yAxis"></or-translate> <or-translate value="min"></or-translate></span>
                                    </or-vaadin-number-field>
                                `,()=>e`
                                    <or-vaadin-text-field value="auto" readonly>
                                        <span slot="label"><or-translate value="yAxis"></or-translate> <or-translate value="min"></or-translate></span>
                                    </or-vaadin-text-field>
                                `)}
                                <or-mwc-input .type="${r.SWITCH}" style="margin: 0 -10px 0 0;" .value="${void 0!==c}"
                                              @or-mwc-input-changed="${t=>this.onMinMaxValueToggle("left","min",t)}"
                                ></or-mwc-input>
                            </div>
                        </div>

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