var __decorate=this&&this.__decorate||function(e,t,o,s){var l,r=arguments.length,i=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,s);else for(var h=e.length-1;h>=0;h--)(l=e[h])&&(i=(r<3?l(i):r>3?l(t,o,i):l(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import{InputType as e}from"@openremote/or-mwc-components/or-mwc-input";import{css as t,html as o,LitElement as s,unsafeCSS as l}from"lit";import{customElement as r,property as i}from"lit/decorators.js";import{ifDefined as h}from"lit/directives/if-defined.js";import{DefaultColor5 as a}from"@openremote/core";import{style as n}from"../style";export class ThresholdChangeEvent extends CustomEvent{constructor(e){super(ThresholdChangeEvent.NAME,{bubbles:!0,composed:!0,detail:e})}}ThresholdChangeEvent.NAME="threshold-change";export class TextColorsChangeEvent extends CustomEvent{constructor(e){super(TextColorsChangeEvent.NAME,{bubbles:!0,composed:!0,detail:e})}}TextColorsChangeEvent.NAME="text-colors-change";export class BoolColorsChangeEvent extends CustomEvent{constructor(e){super(BoolColorsChangeEvent.NAME,{bubbles:!0,composed:!0,detail:e})}}BoolColorsChangeEvent.NAME="bool-colors-change";let styling=t`

  #thresholds-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .threshold-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .threshold-list-item-colour {
    height: 100%;
    padding: 0 4px 0 0;
  }

  .threshold-list-item:hover .button-clear {
    visibility: visible;
  }

  .button-clear {
    background: none;
    visibility: hidden;
    color: var(--or-app-color5, ${l(a)});
    --or-icon-fill: var(--or-app-color5, ${l(a)});
    display: inline-block;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .button-clear:hover {
    --or-icon-fill: var(--or-app-color4);
  }

`,ThresholdsPanel=class extends s{constructor(){super(...arguments),this.thresholds=[],this.textColors=[]}static get styles(){return[styling,n]}updated(e){e.has("thresholds")&&this.thresholds&&this.dispatchEvent(new ThresholdChangeEvent(this.thresholds)),e.has("textColors")&&this.textColors&&this.dispatchEvent(new TextColorsChangeEvent(this.textColors)),e.has("boolColors")&&this.boolColors&&this.dispatchEvent(new BoolColorsChangeEvent(this.boolColors))}get colorValue(){return e=>e?e.startsWith("#")?e:"#"+e:"#000000"}render(){var t,s;return o`
            <div id="thresholds-list" class="expanded-panel">

                <!-- Thresholds by number -->
                ${"number"===this.valueType||"integer"===this.valueType||"positiveInteger"===this.valueType||"positiveNumber"===this.valueType||"negativeInteger"===this.valueType||"negativeNumber"===this.valueType?o`
                    ${this.thresholds.sort((e,t)=>e[0]<t[0]?-1:1).map((t,s)=>o`
                            <div class="threshold-list-item">
                                <div class="threshold-list-item-colour">
                                    <or-mwc-input type="${e.COLOUR}" value="${t[1]}"
                                                  @or-mwc-input-changed="${e=>{this.thresholds[s][1]=e.detail.value,this.requestUpdate("thresholds")}}"
                                    ></or-mwc-input>
                                </div>
                                <or-vaadin-number-field value=${t[0]} min=${h(this.min)} max=${h(this.max)}
                                                        ?disabled=${0===s&&this.max} @change=${e=>{let t=e.currentTarget;t.checkValidity()&&(this.thresholds[s][0]=Number(t.value),this.requestUpdate("thresholds"))}}
                                ></or-vaadin-number-field>
                                ${0===s?o`
                                    <button class="button-clear"
                                            style="margin-left: 8px;">
                                        <or-icon icon="lock" style="--or-icon-fill: var(--or-app-color5, ${l(a)});"></or-icon>
                                    </button>
                                `:o`
                                    <button class="button-clear"
                                            style="margin-left: 8px;"
                                            @click="${()=>{this.removeThreshold(t)}}">
                                        <or-icon icon="close-circle"></or-icon>
                                    </button>
                                `}
                            </div>
                        `)}
                    <or-vaadin-button style="margin-top: 8px;" @click=${()=>this.addNewThreshold()}>
                        <or-icon slot="prefix" icon="plus"></or-icon>
                        <or-translate value="threshold"></or-translate>
                    </or-vaadin-button>
                `:null}

                <!-- Thresholds by boolean -->
                ${"boolean"===this.valueType&&this.boolColors?o`
                    <div class="threshold-list-item">
                        <div class="threshold-list-item-colour">
                            <or-mwc-input type="${e.COLOUR}" value="${this.colorValue(null==(t=this.boolColors)?void 0:t.true)}"
                                          @or-mwc-input-changed="${e=>{this.onBoolColorChange(!0,e.detail.value)}}"
                            ></or-mwc-input>
                        </div>
                        <or-vaadin-text-field value="True" readonly></or-vaadin-text-field>
                    </div>
                    <div class="threshold-list-item">
                        <div class="threshold-list-item-colour">
                            <or-mwc-input type="${e.COLOUR}" value="${this.colorValue(null==(s=this.boolColors)?void 0:s.false)}"
                                          @or-mwc-input-changed="${e=>{this.onBoolColorChange(!1,e.detail.value)}}"
                            ></or-mwc-input>
                        </div>
                        <or-vaadin-text-field value="False" readonly></or-vaadin-text-field>
                    </div>
                `:null}

                <!-- Thresholds by string -->
                ${"text"===this.valueType&&this.textColors?o`
                    ${this.textColors.map((t,s)=>o`
                            <div class="threshold-list-item">
                                <div class="threshold-list-item-colour">
                                    <or-mwc-input type="${e.COLOUR}" value="${t[1]}"
                                                  @or-mwc-input-changed="${e=>{this.textColors[s][1]=e.detail.value,this.requestUpdate("textColors")}}"
                                    ></or-mwc-input>
                                </div>
                                <or-vaadin-text-field value=${t[0]}
                                                      @change=${e=>{this.textColors[s][0]=e.currentTarget.value,this.requestUpdate("textColors")}}
                                ></or-vaadin-text-field>
                                <button class="button-clear"
                                        style="margin-left: 8px;"
                                        @click="${()=>{this.removeThreshold(t)}}">
                                   <or-icon icon="close-circle"></or-icon>
                               </button>
                            </div>
                        `)}
                    <or-vaadin-button style="margin-top: 8px;" @click=${()=>this.addNewThreshold()}>
                        <or-icon slot="prefix" icon="plus"></or-icon>
                        <or-translate value="threshold"></or-translate>
                    </or-vaadin-button>
                `:null}
            </div>
        `}onBoolColorChange(e,t){let o=t.startsWith("#")?t.substring(1):t;this.boolColors||(this.boolColors={type:"boolean",true:"4caf50",false:"ef5350"}),this.boolColors=Object.assign(Object.assign({},this.boolColors),{[e?"true":"false"]:o})}removeThreshold(e){"number"==typeof e[0]?this.thresholds=this.thresholds.filter(t=>t!==e):this.textColors=this.textColors.filter(t=>t!==e)}addThreshold(e){"number"==typeof e[0]?(this.thresholds.push(e),this.requestUpdate("thresholds")):(this.textColors.push(e),this.requestUpdate("textColors"))}addNewThreshold(){if("text"===this.valueType)this.addThreshold(["new","#000000"]);else{let e=this.thresholds[this.thresholds.length-1][0]+10;this.addThreshold([!this.max||e<=this.max?e:this.max,"#000000"])}this.updateComplete.then(()=>{var e;let t=null==(e=this.shadowRoot)?void 0:e.getElementById("thresholds-list");Array.from(t.children)[t.children.length-2].children[1].setAttribute("focused","true")})}};__decorate([i()],ThresholdsPanel.prototype,"thresholds",void 0),__decorate([i()],ThresholdsPanel.prototype,"textColors",void 0),__decorate([i()],ThresholdsPanel.prototype,"boolColors",void 0),__decorate([i()],ThresholdsPanel.prototype,"min",void 0),__decorate([i()],ThresholdsPanel.prototype,"max",void 0),__decorate([i()],ThresholdsPanel.prototype,"valueType",void 0),ThresholdsPanel=__decorate([r("thresholds-panel")],ThresholdsPanel);export{ThresholdsPanel};