var __decorate=this&&this.__decorate||function(e,t,a,s){var r,i=arguments.length,n=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,a):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,a,s);else for(var o=e.length-1;o>=0;o--)(r=e[o])&&(n=(i<3?r(n):i>3?r(t,a,n):r(t,a))||n);return i>3&&n&&Object.defineProperty(t,a,n),n};import{css as e,html as t,LitElement as a}from"lit";import{customElement as s,property as r}from"lit/decorators.js";import{InputType as i}from"@openremote/or-mwc-components/or-mwc-input";import{style as n}from"./style";import{i18next 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 m,sortScreenPresets as c}from".";let boardSettingsStyling=e`
    .label {
        margin-bottom: 4px;
    }
`,OrDashboardBoardsettings=class extends 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,a;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),s=["PRIVATE","SHARED","PUBLIC"].map(e=>({key:e,value:p(e)})),r=["OFF","ONE_MIN","FIVE_MIN","QUARTER","ONE_HOUR"].map(e=>({key:e,value:`dashboard.interval.${e.toLowerCase()}`})),n=[];return["KEEP_LAYOUT","WRAP_TO_SINGLE_COLUMN","BLOCK_DEVICE"].forEach(e=>{n.push({key:e,value:m(e)})}),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">
                                ${t`<span>${l(o.t("dashboard.whoCanView").toString())}</span>`}
                            </div>
                            <or-mwc-input class="permissionInput" comfortable type="${i.SELECT}" style="width: 100%;"
                                          .options="${s.map(e=>e.value)}"
                                          .value="${p(this.dashboard.access)}"
                                          @or-mwc-input-changed="${e=>{var t;this.setAccess(null==(t=s.find(t=>t.value==e.detail.value))?void 0:t.key)}}"
                            ></or-mwc-input>
                        </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-mwc-input type="${i.NUMBER}" comfortable .value="${this.dashboard.template.columns}" min="1" max="24" @or-mwc-input-changed="${e=>{null!=this.dashboard.template&&e.detail.value<=24&&e.detail.value>=1&&(this.dashboard.template.columns=e.detail.value,this.forceParentUpdate(!0))}}"></or-mwc-input>
                        </div>
                        
                        <!-- Scaling preset -->
                        ${1===e.length?t`
                            ${this.scalingPresetTemplate(e,n)}
                        `: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>
                            <div>
                                <or-mwc-input type="${i.NUMBER}" comfortable .value="${this.dashboard.template.maxScreenWidth}" style="width: 70px;"
                                              @or-mwc-input-changed="${e=>{null!=this.dashboard.template&&(this.dashboard.template.maxScreenWidth=e.detail.value,this.forceParentUpdate(!0))}}">
                                </or-mwc-input>
                                <span style="margin-left: 2px;">px</span>
                            </div>
                        </div>
                        
                        <!-- "Set to mobile" preset button, for ease of use -->
                        <div>
                            <or-mwc-input type="${i.BUTTON}" comfortable label="dashboard.setToMobilePreset"
                                          @or-mwc-input-changed="${()=>{this.setToMobilePreset()}}">
                            </or-mwc-input>
                        </div>
                    </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-mwc-input type="${i.SELECT}" comfortable .options="${r.map(e=>e.value)}" style="width: 100%;"
                                      .value="${`dashboard.interval.${(null==(a=this.dashboard.template.refreshInterval)?void 0:a.toLowerCase())||"off"}`}"
                                      @or-mwc-input-changed="${e=>{let t=r.find(t=>t.value===e.detail.value);t&&this.setRefreshInterval(t.key)}}">
                        </or-mwc-input>
                    </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=>{var r;return t`
                    <div style="margin-bottom: ${e.length>1?"24px":"16px"}">
                        <div class="label">
                            ${t`<span>${l(o.t("dashboard.onScreenMyBoardShould").replace("{{size}}","<b>"+o.t(s.displayName)+"</b>"))}</span>`}
                        </div>
                        <or-mwc-input class="displayInput" type="${i.SELECT}" comfortable style="width: 100%;"
                                      .options="${a.map(e=>e.value)}"
                                      .value="${null==(r=a.find(e=>e.key==s.scalingPreset))?void 0:r.value}"
                                      @or-mwc-input-changed="${e=>{var t;s.scalingPreset=null==(t=a.find(t=>t.value==e.detail.value))?void 0:t.key,this.forceParentUpdate(!0),this.requestUpdate()}}"
                        ></or-mwc-input>
                    </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+" "+o.t("screen")}</span>
                        <div>
                            <span style="margin-right: 4px;">${0==e.indexOf(s)?">":"<"}</span>
                            <or-mwc-input type="${i.NUMBER}" comfortable .disabled="${e.length>1&&0==e.indexOf(s)}" style="width: 70px;"
                                          .value="${e.length>1&&0==e.indexOf(s)?e[1].breakpoint:s.breakpoint}"
                                          @or-mwc-input-changed="${t=>{this.setBreakpoint(e.indexOf(s),t.detail.value)}}"
                            ></or-mwc-input>
                            <span style="margin-left: 2px;">px</span>
                        </div>
                    </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};