var __decorate=this&&this.__decorate||function(e,t,o,a){var r,s=arguments.length,d=s<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,o):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,o,a);else for(var i=e.length-1;i>=0;i--)(r=e[i])&&(d=(s<3?r(d):s>3?r(t,o,d):r(t,o))||d);return s>3&&d&&Object.defineProperty(t,o,d),d},__awaiter=this&&this.__awaiter||function(e,t,o,a){return new(o||(o=Promise))(function(r,s){function d(e){try{n(a.next(e))}catch(e){s(e)}}function i(e){try{n(a.throw(e))}catch(e){s(e)}}function n(e){var t;e.done?r(e.value):((t=e.value)instanceof o?t:new o(function(e){e(t)})).then(d,i)}n((a=a.apply(e,t||[])).next())})};import{css as e,html as t,LitElement as o}from"lit";import{customElement as a,property as r}from"lit/decorators.js";import"@openremote/or-icon";import{style as s}from"./style";import d,{Util as i}from"@openremote/core";import{showOkCancelDialog as n}from"@openremote/or-mwc-components/or-mwc-dialog";import{i18next as h,translate as l}from"@openremote/or-translate";import{showSnackbar as c}from"@openremote/or-mwc-components/or-mwc-snackbar";import{style as p}from"@openremote/or-asset-tree";import{DashboardService as u,DashboardSizeOption as v}from"./service/dashboard-service";import{isAxiosError as b}from"@openremote/rest";import{when as m}from"lit/directives/when.js";let treeStyling=e`
    #header-btns {
        display: flex;
        flex-direction: row;
        padding-right: 5px;
    }
    
    #content {
        flex: 1;
        overflow: hidden auto;
    }

    .node-container {
        align-items: center;
        padding-left: 10px;
    }
`,OrDashboardTree=class extends l(h)(o){constructor(){super(...arguments),this.realm=d.displayRealm,this.readonly=!0,this.hasChanged=!1,this.showControls=!0}static get styles(){return[s,treeStyling,p]}shouldUpdate(e){return(!(1===e.size&&e.has("hasChanged"))||!this.hasChanged)&&super.shouldUpdate(e)}updated(e){this.dashboards||this.getAllDashboards(),e.has("dashboards")&&null!=e.get("dashboards")&&this.dispatchEvent(new CustomEvent("updated",{detail:this.dashboards})),e.has("selected")&&this.dispatchEvent(new CustomEvent("select",{detail:this.selected}))}getAllDashboards(){return __awaiter(this,void 0,void 0,function*(){return d.rest.api.DashboardResource.getAllRealmDashboards(this.realm).then(e=>{this.dashboards=e.data}).catch(e=>{console.error(e),c(void 0,"errorOccurred")})})}selectDashboard(e){var t;"string"==typeof e?this.selected=null==(t=this.dashboards)?void 0:t.find(t=>t.id===e):this.selected=e}createDashboard(e){u.create(void 0,e,this.realm).then(e=>{this.dashboards?(this.dashboards.push(e),this.requestUpdate("dashboards")):this.dashboards=[e],this.dispatchEvent(new CustomEvent("created",{detail:{d:e}})),this.selectDashboard(e)}).catch(e=>{var t;console.error(e),b(e)&&(null==(t=e.response)?void 0:t.status)===404?c(void 0,"noDashboardFound"):c(void 0,"errorOccurred")})}duplicateDashboard(e){(null==e?void 0:e.id)!==null?this.hasChanged?this.showDiscardChangesModal().then(t=>{t&&this._doDuplicateDashboard(e)}):this._doDuplicateDashboard(e):console.warn("Tried duplicating a NULL dashboard!")}_doDuplicateDashboard(e){let t=JSON.parse(JSON.stringify(e));t.displayName=t.displayName+" copy",t.template&&(t.template.id=i.generateUniqueUUID()),u.create(t,void 0,this.realm).then(e=>{this.dashboards?(this.dashboards.push(e),this.requestUpdate("dashboards")):this.dashboards=[e],this.dispatchEvent(new CustomEvent("created",{detail:{d:e}})),this.selectDashboard(e.id)}).catch(e=>{var t;console.error(e),b(e)&&(null==(t=e.response)?void 0:t.status)===404?c(void 0,"noDashboardFound"):c(void 0,"errorOccurred")})}deleteDashboard(e){null!=e.id&&u.delete(e.id,this.realm).then(()=>{this.getAllDashboards()}).catch(e=>{console.error(e),c(void 0,"errorOccurred")})}onDashboardClick(e){var t;e!==(null==(t=this.selected)?void 0:t.id)&&(this.hasChanged?this.showDiscardChangesModal().then(t=>{t&&this.selectDashboard(e)}):this.selectDashboard(e))}showDiscardChangesModal(){return n(h.t("areYouSure"),h.t("confirmContinueDashboardModified"),h.t("discard"))}render(){var e;let o=(null==(e=this.dashboards)?void 0:e.sort((e,t)=>e.displayName?e.displayName.localeCompare(t.displayName):0).map(e=>({icon:"view-dashboard",text:e.displayName,value:e.id})))||[];return t`
            <div id="menu-header">
                <div id="title-container">
                    <span id="title"><or-translate value="insights"></or-translate></span>
                </div>
                
                <!-- Controls header -->
                ${this.showControls?t`
                    <div id="header-btns">
                        ${m(null!=this.selected,()=>t`
                            <or-vaadin-button theme="icon" title=${h.t("deselect")} @click=${()=>this.selectDashboard(void 0)}>
                                <or-icon icon="close"></or-icon>
                            </or-vaadin-button>
                            ${m(!this.readonly,()=>t`
                                <or-vaadin-button theme="icon" class="hideMobile" title=${h.t("duplicate")} @click=${()=>this.duplicateDashboard(this.selected)}>
                                    <or-icon icon="content-copy"></or-icon>
                                </or-vaadin-button>
                                <or-vaadin-button theme="icon" title=${h.t("delete")} @click=${()=>{null!=this.selected&&n(h.t("areYouSure"),h.t("dashboard.deletePermanentWarning",{dashboard:this.selected.displayName}),h.t("delete")).then(e=>{e&&this.deleteDashboard(this.selected)})}}>
                                    <or-icon icon="delete"></or-icon>
                                </or-vaadin-button>
                            `)}
                        `)}
                        ${m(!this.readonly,()=>t`
                            <or-vaadin-button theme="icon" class="hideMobile" title=${h.t("addInsights")} @click=${()=>this.createDashboard(v.DESKTOP)}>
                                <or-icon icon="plus"></or-icon>
                            </or-vaadin-button>
                        `)}
                    </div>
                `:void 0}
            </div>
            
            <!-- List of dashboards -->
            <div id="content">
                <div id="list-container" style="overflow: hidden;">
                    <ol id="list">
                        ${o.map(e=>{var o;return t`
                            <li ?data-selected="${e.value===(null==(o=this.selected)?void 0:o.id)}" @click="${t=>this.onDashboardClick(e.value)}">
                                <div class="node-container">
                                    <span class="node-name">${e.text} </span>
                                </div>
                            </li>
                        `})}
                    </ol>
                </div>
            </div>
        `}};__decorate([r()],OrDashboardTree.prototype,"dashboards",void 0),__decorate([r()],OrDashboardTree.prototype,"selected",void 0),__decorate([r()],OrDashboardTree.prototype,"realm",void 0),__decorate([r()],OrDashboardTree.prototype,"userId",void 0),__decorate([r()],OrDashboardTree.prototype,"readonly",void 0),__decorate([r()],OrDashboardTree.prototype,"hasChanged",void 0),__decorate([r()],OrDashboardTree.prototype,"showControls",void 0),OrDashboardTree=__decorate([a("or-dashboard-tree")],OrDashboardTree);export{OrDashboardTree};