var __decorate=this&&this.__decorate||function(t,i,e,n){var o,a=arguments.length,l=a<3?i:null===n?n=Object.getOwnPropertyDescriptor(i,e):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,i,e,n);else for(var s=t.length-1;s>=0;s--)(o=t[s])&&(l=(a<3?o(l):a>3?o(i,e,l):o(i,e))||l);return a>3&&l&&Object.defineProperty(i,e,l),l};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{debounce as l}from"lodash";import{InputType as s}from"@openremote/or-mwc-components/or-mwc-input";import{when as r}from"lit/directives/when.js";import{OrChart as d}from"@openremote/or-chart";import{getAssetDescriptorIconTemplate as u}from"@openremote/or-icon";let styling=t`
  .switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
`,ChartSettings=class extends o{constructor(){super(...arguments),this.timeWindowOptions=new Map,this.timePrefixOptions=[],this.samplingOptions=new Map}setTimeWindowOptions(t){this.timeWindowOptions=t}setTimePrefixOptions(t){this.timePrefixOptions=t}setSamplingOptions(t){this.samplingOptions=t}static get styles(){return[...super.styles,styling]}render(){var t,e,n,o,l,g,p,m,c,h,f;let v=this.widgetConfig.attributeConfig,w=null==(n=null==(e=null==(t=this.widgetConfig.chartOptions.options)?void 0:t.scales)?void 0:e.y)?void 0:n.min,b=null==(g=null==(l=null==(o=this.widgetConfig.chartOptions.options)?void 0:o.scales)?void 0:l.y)?void 0:g.max,y=((null==(p=null==v?void 0:v.rightAxisAttributes)?void 0:p.length)||0)>0,C=(t,e,n)=>{var o,a,l,s,r,g;let p=null==(l=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:l.replace("#","");if(!p){let i=null==(s=this.widgetConfig.attributeRefs)?void 0:s.findIndex(i=>i.id===t.id&&i.name===e.name);i>=0&&(p=null==(g=null==(r=d.DEFAULT_COLORS)?void 0:r[i])?void 0:g.replace("#",""))}return i`<span>${u(n,void 0,void 0,p)}</span>`},x=t=>{var i,e,n,o,l,s,r,u,g,p,m,c,h,f;let w=(null==(n=null==(e=null==(i=this.widgetConfig)?void 0:i.attributeConfig)?void 0:e.rightAxisAttributes)?void 0:n.find(i=>i.id===t.id&&i.name===t.name))!==void 0,b=(null==(o=null==v?void 0:v.faintAttributes)?void 0:o.find(i=>i.id===t.id&&i.name===t.name))!==void 0,y=(null==(l=null==v?void 0:v.smoothAttributes)?void 0:l.find(i=>i.id===t.id&&i.name===t.name))!==void 0,C=(null==(s=null==v?void 0:v.steppedAttributes)?void 0:s.find(i=>i.id===t.id&&i.name===t.name))!==void 0,x=(null==(r=null==v?void 0:v.areaAttributes)?void 0:r.find(i=>i.id===t.id&&i.name===t.name))!==void 0,$=(null==(u=null==v?void 0:v.extendedAttributes)?void 0:u.find(i=>i.id===t.id&&i.name===t.name))!==void 0,A=null==(m=null==(p=null==(g=this.widgetConfig)?void 0:g.attributeColors)?void 0:p.find(i=>i[0].id===t.id&&i[0].name===t.name))?void 0:m[1],T=!1;if(A)T=!0;else{let i=null==(h=null==(c=this.widgetConfig)?void 0:c.attributeRefs)?void 0:h.findIndex(i=>i.id===t.id&&i.name===t.name);i>=0&&(A=null==(f=d.DEFAULT_COLORS)?void 0:f[i])}return[{icon:"palette",tooltip:a.t("dashboard.lineColor"),active:T,color:A,disabled:!1},{icon:"chart-bell-curve-cumulative",tooltip:a.t("dashboard.smooth"),active:y,color:A,disabled:!1},{icon:"square-wave",tooltip:a.t("dashboard.stepped"),active:C,color:A,disabled:!1},{icon:"chart-areaspline-variant",tooltip:a.t("dashboard.fill"),active:x,color:A,disabled:!1},{icon:"arrange-send-backward",tooltip:a.t("dashboard.faint"),active:b,color:A,disabled:!1},{icon:"arrow-expand-right",tooltip:a.t("dashboard.extendData"),active:$,color:A,disabled:!1},{icon:w?"arrow-right-bold":"arrow-left-bold",tooltip:a.t("dashboard.toggleAxis"),active:w,color:A,disabled:!1}]},$=null!=(m=this.timePrefixOptions.find(t=>{var i,e;return null==(e=null==(i=this.widgetConfig)?void 0:i.defaultTimePresetKey)?void 0:e.startsWith(t)}))?m:this.timePrefixOptions[0],[A,T]=null==(h=null==(c=this.widgetConfig)?void 0:c.defaultTimePresetKey)?void 0:h.split($);T&&this.timeWindowOptions.has(T)||(T=Array.from(this.timeWindowOptions.keys())[0]);let S=this.timePrefixOptions.map(t=>t.toLowerCase()),O=Array.from(this.timeWindowOptions.keys()).map(t=>[t,a.t(t.toLowerCase())]);return i`
            <div>
                <!-- Attribute selection -->
                <settings-panel displayName="attributes" expanded>
                    <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="${C}" .attributeActionCallback="${x}"
                                      @attribute-action="${t=>this.onAttributeAction(t)}"
                                      @attribute-select="${t=>this.onAttributesSelect(t)}"
                    ></attributes-chart-panel>
                </settings-panel>

                <!-- Time options -->
                <settings-panel displayName="time" expanded>
                    <div style="padding-bottom: 12px; display: flex; flex-direction: column; gap: 6px;">
                        <!-- This/last selection of timeframe -->
                        <or-mwc-input .type="${s.SELECT}" label="${a.t("prefixDefault")}" style="width: 100%;"
                                      .options="${S}" value="${$.toLowerCase()}"
                                      @or-mwc-input-changed="${t=>this.onTimePrefixSelect(t)}"
                        ></or-mwc-input>
                        <!-- Select time frame -->
                        <or-mwc-input .type="${s.SELECT}" label="${a.t("timeframeDefault")}" style="width: 100%;"
                                      .options="${O}" value="${T}"
                                      @or-mwc-input-changed="${t=>this.onTimeWindowSelect(t)}"
                        ></or-mwc-input>
                    </div>  
                </settings-panel>
                <!-- Display options --> 
                <settings-panel displayName="display" expanded>
                    <div style="padding-bottom: 12px; display: flex; flex-direction: column; gap: 6px;">
                        <div class="switch-container">
                            <span><or-translate value="dashboard.toggleStackView"></or-translate></span>
                            <or-mwc-input .type="${s.SWITCH}" style="margin: 0 -10px;" .value="${this.widgetConfig.stacked}"
                                          @or-mwc-input-changed="${t=>this.onStackViewToggle(t)}"
                            ></or-mwc-input>
                        </div>
                        <div class="switch-container">
                            <span><or-translate value="dashboard.allowTimerangeSelect"></or-translate></span>
                            <or-mwc-input .type="${s.SWITCH}" style="margin: 0 -10px;" .value="${!this.widgetConfig.showTimestampControls}"
                                          @or-mwc-input-changed="${t=>this.onTimestampControlsToggle(t)}"
                            ></or-mwc-input>
                        </div>
                        <div class="switch-container">
                            <span><or-translate value="dashboard.showLegend"></or-translate></span>
                            <or-mwc-input .type="${s.SWITCH}" style="margin: 0 -10px;" .value="${this.widgetConfig.showLegend}"
                                          @or-mwc-input-changed="${t=>this.onShowLegendToggle(t)}"
                            ></or-mwc-input>
                        </div>
                        <!-- Datazoombar -->
                        <div class="switch-container">
                            <span><or-translate value="dashboard.showZoomBar"></or-translate></span>
                            <or-mwc-input .type="${s.SWITCH}" style="margin: 0 -10px;" .value="${this.widgetConfig.showZoomBar}"
                                          @or-mwc-input-changed="${t=>this.onShowZoomBarToggle(t)}"
                            ></or-mwc-input>
                        </div>
                    </div>
                </settings-panel>

                <!-- Axis configuration -->
                <settings-panel displayName="dashboard.axisConfig" expanded>
                    <div style="padding-bottom: 12px; display: flex; flex-direction: column; gap: 16px;">
                        <!-- Left axis configuration -->
                        <div>
                            ${r(y,()=>i`
                                <div style="margin-bottom: 8px;">
                                    <span><or-translate value="dashboard.leftAxis"></or-translate></span>
                                </div>
                            `)}
                            <div style="display: flex;">
                                ${void 0!==b?i`
                                    <or-mwc-input .type="${s.NUMBER}" label="${a.t("yAxis")+" "+a.t("max")}" .value="${b}" style="width: 100%;"
                                                  @or-mwc-input-changed="${t=>this.onMinMaxValueChange("left","max",t)}"
                                    ></or-mwc-input>
                                `:i`
                                    <or-mwc-input .type="${s.TEXT}" label="${a.t("yAxis")+" "+a.t("max")}" disabled="true" value="auto" style="width: 100%;"></or-mwc-input>
                                `}
                                <or-mwc-input .type="${s.SWITCH}" style="margin: 0 -10px 0 0;" .value="${void 0!==b}"
                                              @or-mwc-input-changed="${t=>this.onMinMaxValueToggle("left","max",t)}"
                                ></or-mwc-input>
                            </div>
                            <div style="display: flex; margin-top: 12px;">
                                ${void 0!==w?i`
                                    <or-mwc-input .type="${s.NUMBER}" label="${a.t("yAxis")+" "+a.t("min")}" .value="${w}" style="width: 100%;"
                                                  @or-mwc-input-changed="${t=>this.onMinMaxValueChange("left","min",t)}"
                                    ></or-mwc-input>
                                `:i`
                                    <or-mwc-input .type="${s.TEXT}" label="${a.t("yAxis")+" "+a.t("min")}" disabled="true" value="auto" style="width: 100%;"></or-mwc-input>
                                `}
                                <or-mwc-input .type="${s.SWITCH}" style="margin: 0 -10px 0 0;" .value="${void 0!==w}"
                                              @or-mwc-input-changed="${t=>this.onMinMaxValueToggle("left","min",t)}"
                                ></or-mwc-input>
                            </div>
                        </div>

                        <!-- Right axis configuration -->
                        ${r(y,()=>{var t,e,n,o,l,r;let d=null==(n=null==(e=null==(t=this.widgetConfig.chartOptions.options)?void 0:t.scales)?void 0:e.y1)?void 0:n.min,u=null==(r=null==(l=null==(o=this.widgetConfig.chartOptions.options)?void 0:o.scales)?void 0:l.y1)?void 0:r.max;return i`
                                <div>
                                    <div style="margin-bottom: 8px;">
                                        <span><or-translate value="dashboard.rightAxis"></or-translate></span>
                                    </div>
                                    <div style="display: flex;">
                                        ${void 0!==u?i`
                                            <or-mwc-input .type="${s.NUMBER}" label="${a.t("yAxis")+" "+a.t("max")}" .value="${u}" style="width: 100%;"
                                                          @or-mwc-input-changed="${t=>this.onMinMaxValueChange("right","max",t)}"
                                            ></or-mwc-input>
                                        `:i`
                                            <or-mwc-input .type="${s.TEXT}" label="${a.t("yAxis")+" "+a.t("max")}" disabled="true" value="auto"
                                                          style="width: 100%;"></or-mwc-input>
                                        `}
                                        <or-mwc-input .type="${s.SWITCH}" style="margin: 0 -10px 0 0;" .value="${void 0!==u}"
                                                      @or-mwc-input-changed="${t=>this.onMinMaxValueToggle("right","max",t)}"
                                        ></or-mwc-input>
                                    </div>
                                    <div style="display: flex; margin-top: 12px;">
                                        ${void 0!==d?i`
                                            <or-mwc-input .type="${s.NUMBER}" label="${a.t("yAxis")+" "+a.t("min")}" .value="${d}" style="width: 100%;"
                                                          @or-mwc-input-changed="${t=>this.onMinMaxValueChange("right","min",t)}"
                                            ></or-mwc-input>
                                        `:i`
                                            <or-mwc-input .type="${s.TEXT}" label="${a.t("yAxis")+" "+a.t("min")}" disabled="true" value="auto"
                                                          style="width: 100%;"></or-mwc-input>
                                        `}
                                        <or-mwc-input .type="${s.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>

                <!-- Data sampling options -->
                ${r(Array.from(null==(f=this.samplingOptions)?void 0:f.keys()).length>1,()=>{var t,e;let n=Array.from(this.samplingOptions.entries()),o=null!=(e=null==(t=null==n?void 0:n.find(t=>t[1]===this.widgetConfig.datapointQuery.type))?void 0:t[0])?e:n[0];return i`
                        <settings-panel displayName="dataSampling" expanded="${!1}">
                            <div style="padding-bottom: 12px; display: flex; flex-direction: column; gap: 12px;">
                                <div>
                                    <or-mwc-input .type="${s.SELECT}" style="width: 100%" .options="${Array.from(this.samplingOptions.keys())}" .value="${o}"
                                                  label="${a.t("algorithm")}" @or-mwc-input-changed="${t=>this.onSamplingQueryChange(t)}"
                                    ></or-mwc-input>
                                </div>
                                <div>
                                    ${this.getSamplingOptionsTemplate(this.widgetConfig.datapointQuery.type)}
                                </div>
                            </div>
                        </settings-panel>
                    `})}
            </div>
        `}getSamplingOptionsTemplate(t){if("interval"!==t)return i``;{let t=this.widgetConfig.datapointQuery;return i`
                    <or-mwc-input .type="${s.SELECT}" style="width: 100%;" .options="${["AVG","MIN","MAX"]}"
                                  .value="${t.formula}" label="${a.t("algorithmMethod")}" @or-mwc-input-changed="${i=>{t.formula=i.detail.value,this.notifyConfigUpdate()}}"
                    ></or-mwc-input>
                `}}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"chart-bell-curve-cumulative":e.active||this._removeAttributeSetting("steppedAttributes",i),this._toggleAttributeSetting("smoothAttributes",i);break;case"square-wave":e.active||this._removeAttributeSetting("smoothAttributes",i),this._toggleAttributeSetting("steppedAttributes",i);break;case"chart-areaspline-variant":this._toggleAttributeSetting("areaAttributes",i);break;case"arrange-send-backward":this._toggleAttributeSetting("faintAttributes",i);break;case"arrow-expand-right":this._toggleAttributeSetting("extendedAttributes",i);break;default:console.warn("Unknown attribute panel action:",e)}}onAttributesSelect(t){this.widgetConfig.attributeRefs.filter(i=>!t.detail.attributeRefs.includes(i)).forEach(t=>{this.removeFromAttributeConfig(t),this.removeFromAttributeColors(t)}),this.widgetConfig.attributeRefs=t.detail.attributeRefs,this.notifyConfigUpdate()}removeFromAttributeConfig(t){let i=this.widgetConfig.attributeConfig;i&&Object.keys(i).forEach(e=>{var n;i[e]=null==(n=i[e])?void 0:n.filter(i=>i.id!==t.id||i.name!==t.name)})}_toggleAttributeSetting(t,i){var e;let n=null==(e=this.widgetConfig.attributeConfig)?void 0:e[t],o=null==n?void 0:n.findIndex(t=>t.id===i.id&&t.name===i.name);null==o||o<0?this._addAttributeSetting(t,i):this._removeAttributeSetting(t,i),this.notifyConfigUpdate()}_addAttributeSetting(t,i){var e,n;null!=(e=this.widgetConfig).attributeConfig||(e.attributeConfig={}),null!=(n=this.widgetConfig.attributeConfig)[t]||(n[t]=[]);let o=this.widgetConfig.attributeConfig[t];o.find(t=>t.id===i.id&&t.name===i.name)?console.warn(`Could not add attribute ${i.name}; attribute already exists in attribute setting ${t}.`,o):(console.debug(`Adding attribute ${i.name} to setting ${t} in widget config.`),o.push(i))}_removeAttributeSetting(t,i){var e;let n=null==(e=this.widgetConfig.attributeConfig)?void 0:e[t];if(!n)return void console.warn(`Could not remove attribute; attribute setting ${t} not found in widget config.`,n);let o=null==n?void 0:n.findIndex(t=>t.id===i.id&&t.name===i.name);if(null==o||o<0)return void console.warn(`Could not remove attribute; attribute ${i.name} not found in attribute setting ${t}.`,n);console.debug(`Removing attribute ${i.name} from setting ${t} in widget config.`),1===n.length?delete this.widgetConfig.attributeConfig[t]:n.splice(o,1)}removeFromAttributeColors(t){this.widgetConfig.attributeColors=this.widgetConfig.attributeColors.filter(i=>i[0]!==t)}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",l(()=>{var i;let e=n.value;null!=(i=this.widgetConfig).attributeColors||(i.attributeColors=[]);let o=this.widgetConfig.attributeColors.find(i=>i[0]===t);o?o[1]=e:this.widgetConfig.attributeColors.push([t,e]),this.notifyConfigUpdate()},200)),n.click())}onTimePrefixSelect(t){let i=this.widgetConfig.defaultTimePresetKey,e=t.detail.value.toString(),n=this.timePrefixOptions;n.find(t=>i.includes(t))?n.forEach(t=>i=i.replace(t,"")):i=Array.from(this.timeWindowOptions.keys())[0],this.widgetConfig.defaultTimePresetKey=e+i,console.debug(`Updated default time preset to ${this.widgetConfig.defaultTimePresetKey}`),this.notifyConfigUpdate()}onTimeWindowSelect(t){let i=this.widgetConfig.defaultTimePresetKey,e=t.detail.value.toString(),n=Array.from(this.timeWindowOptions.keys()).sort((t,i)=>i.length-t.length);n.find(t=>i.includes(t))?n.forEach(t=>i=i.replace(t,"")):i=this.timePrefixOptions[0],this.widgetConfig.defaultTimePresetKey=i+e,console.debug(`Updated default time preset to ${this.widgetConfig.defaultTimePresetKey}`),this.notifyConfigUpdate()}onStackViewToggle(t){this.widgetConfig.stacked=t.detail.value,this.notifyConfigUpdate()}onTimestampControlsToggle(t){this.widgetConfig.showTimestampControls=!t.detail.value,this.notifyConfigUpdate()}onShowLegendToggle(t){this.widgetConfig.showLegend=t.detail.value,this.notifyConfigUpdate()}onShowZoomBarToggle(t){this.widgetConfig.showZoomBar=t.detail.value,this.notifyConfigUpdate()}setAxisMinMaxValue(t,i,e){"left"===t?"min"===i?this.widgetConfig.chartOptions.options.scales.y.min=e:this.widgetConfig.chartOptions.options.scales.y.max=e:"min"===i?this.widgetConfig.chartOptions.options.scales.y1.min=e:this.widgetConfig.chartOptions.options.scales.y1.max=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)}onSamplingQueryChange(t){this.widgetConfig.datapointQuery.type=this.samplingOptions.get(t.detail.value),this.notifyConfigUpdate()}};__decorate([n("attributes-chart-panel")],ChartSettings.prototype,"_attributesPanelElem",void 0),ChartSettings=__decorate([e("chart-settings")],ChartSettings);export{ChartSettings};