var __decorate=this&&this.__decorate||function(e,t,a,s){var r,n=arguments.length,i=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,a):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,a,s);else for(var o=e.length-1;o>=0;o--)(r=e[o])&&(i=(n<3?r(i):n>3?r(t,a,i):r(t,a))||i);return n>3&&i&&Object.defineProperty(t,a,i),i};import{css as e,html as t,LitElement as a}from"lit";import{customElement as s,property as r}from"lit/decorators.js";import{style as n}from"./style";import{i18next as i,translate as o}from"@openremote/or-translate";import{unsafeHTML as l}from"lit/directives/unsafe-html.js";import{when as d}from"lit/directives/when.js";import{dashboardAccessToString as p,scalingPresetToString as h,sortScreenPresets as c}from".";let boardSettingsStyling=e`
    .label {
        margin-bottom: 4px;
    }
`,OrDashboardBoardsettings=class extends o(i)(a){static get styles(){return[boardSettingsStyling,n]}forceParentUpdate(e=!1){this.dispatchEvent(new CustomEvent("update",{detail:{force:e}}))}setAccess(e){this.dashboard.access=e,this.requestUpdate(),this.forceParentUpdate(!1)}setBreakpoint(e,t){this.dashboard.template.screenPresets[e].breakpoint=t,this.requestUpdate(),this.forceParentUpdate(!0)}setRefreshInterval(e){this.dashboard.template.refreshInterval=e,this.requestUpdate(),this.forceParentUpdate(!1)}render(){var e;if((null==(e=this.dashboard.template)?void 0:e.screenPresets)==null)return t`
                <div style="padding: 24px;">
                    <span><or-translate value="errorOccurred"></or-translate></span><br/>
                    <span><or-translate value="noDashboardFound"></or-translate></span>
                </div>
            `;{let e=c(this.dashboard.template.screenPresets,!0),a=["PRIVATE","SHARED","PUBLIC"].map(e=>({value:e,label:p(e)})),s=["OFF","ONE_MIN","FIVE_MIN","QUARTER","ONE_HOUR"].map(e=>({value:e,label:i.t(`dashboard.interval.${e.toLowerCase()}`)})),r=["KEEP_LAYOUT","WRAP_TO_SINGLE_COLUMN","BLOCK_DEVICE"].map(e=>({value:e,label:h(e)}));return t`

                <!-- Permissions panel, to set who can view/edit the selected dashboard -->
                ${d(this.showPerms,()=>t`
                    <settings-panel displayName="permissions" expanded="${!0}">
                        <div>
                            <div class="label">
                                <or-translate value="dashboard.whoCanView"></or-translate>
                            </div>
                            <or-vaadin-select .items=${a} value=${this.dashboard.access}
                                              @change=${e=>this.setAccess(e.currentTarget.value)}
                            ></or-vaadin-select>
                        </div>
                    </settings-panel>
                `)}

                <!-- Layout panel, with options such as 'amount of columns' -->
                <settings-panel displayName="layout" expanded="${!0}">
                    <div>
                        
                        <!-- Number of Columns control -->
                        <div style="margin-bottom: 24px; display: flex; align-items: center;">
                            <span style="min-width: 180px;"><or-translate value="dashboard.numberOfColumns"></or-translate></span>
                            <or-vaadin-number-field value=${this.dashboard.template.columns} min="1" max="24"
                                                    @change=${e=>{let t=e.currentTarget;t.checkValidity()&&null!=this.dashboard.template&&(this.dashboard.template.columns=Number(t.value),this.forceParentUpdate(!0))}}
                            ></or-vaadin-number-field>
                        </div>
                        
                        <!-- Scaling preset -->
                        ${1===e.length?t`
                            ${this.scalingPresetTemplate(e,r)}
                        `:void 0}
                        
                        <!-- Screen preset -->
                        ${1===e.length?t`
                            ${this.screenPresetTemplate(e,["Mobile breakpoint"])}
                        `:void 0}
                        
                        <!-- Max Screen Width control-->
                        <div style="margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between;">
                            <span style="min-width: 150px;"><or-translate value="dashboard.maxScreenWidth"></or-translate></span>
                            <or-vaadin-number-field value=${this.dashboard.template.maxScreenWidth} min="0" style="width: 110px;" @change=${e=>{let t=e.currentTarget;t.checkValidity()&&null!=this.dashboard.template&&(this.dashboard.template.maxScreenWidth=Number(t.value),this.forceParentUpdate(!0))}}>
                                <span slot="suffix">px</span>
                            </or-vaadin-number-field>
                        </div>
                        
                        <!-- "Set to mobile" preset button, for ease of use -->
                        <or-vaadin-button @click=${()=>this.setToMobilePreset()}>
                            <or-translate value="dashboard.setToMobilePreset"></or-translate>
                        </or-vaadin-button>
                    </div>
                </settings-panel>

                <!-- Data management options -->
                <settings-panel displayName="dashboard.dataManagement" expanded="${!0}">
                    <div>
                        <div class="label">
                            <span><or-translate value="dashboard.defaultRefreshInterval"></or-translate></span>
                        </div>
                        <or-vaadin-select .items=${s} value=${this.dashboard.template.refreshInterval}
                                          @change=${e=>{var t;let a=e.currentTarget,r=null==(t=s.find(e=>e.value===a.value))?void 0:t.value;console.debug(r),r&&this.setRefreshInterval(r)}}>
                        </or-vaadin-select>
                    </div>
                </settings-panel>
                
            `}}setToMobilePreset(){this.dashboard.template.columns=4,this.dashboard.template.screenPresets[0].scalingPreset="KEEP_LAYOUT",this.dashboard.template.maxScreenWidth=700,this.requestUpdate(),this.forceParentUpdate(!0)}scalingPresetTemplate(e,a){return t`
            ${e.map(s=>t`
                    <div style="margin-bottom: ${e.length>1?"24px":"16px"}">
                        <div class="label">
                            ${l(i.t("dashboard.onScreenMyBoardShould").replace("{{size}}","<b>"+i.t(s.displayName)+"</b>"))}
                        </div>
                        <or-vaadin-select .items=${a} value=${s.scalingPreset}
                                          @change=${e=>{s.scalingPreset=e.currentTarget.value,this.forceParentUpdate(!0),this.requestUpdate()}}
                        ></or-vaadin-select>
                    </div>
                `)}
        `}screenPresetTemplate(e,a){return t`
            ${e.map((s,r)=>t`
                    <div style="margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;">
                        <span style="min-width: 140px;">${a?a[r]:s.displayName+" "+i.t("screen")}</span>
                        <or-vaadin-number-field value=${e.length>1&&0==e.indexOf(s)?e[1].breakpoint:s.breakpoint} 
                                                ?disabled=${e.length>1&&0==e.indexOf(s)}
                                                min="0" style="width: 110px;" @change=${t=>{let a=t.currentTarget;a.checkValidity()&&this.setBreakpoint(e.indexOf(s),Number(a.value))}}>
                            <span slot="prefix">></span>
                            <span slot="suffix">px</span>
                        </or-vaadin-number-field>
                    </div>
                `)}
        `}};__decorate([r({type:Object})],OrDashboardBoardsettings.prototype,"dashboard",void 0),__decorate([r({type:Boolean})],OrDashboardBoardsettings.prototype,"showPerms",void 0),OrDashboardBoardsettings=__decorate([s("or-dashboard-boardsettings")],OrDashboardBoardsettings);export{OrDashboardBoardsettings};