var __decorate=this&&this.__decorate||function(e,t,o,r){var a,s=arguments.length,d=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,o,r);else for(var i=e.length-1;i>=0;i--)(a=e[i])&&(d=(s<3?a(d):s>3?a(t,o,d):a(t,o))||d);return s>3&&d&&Object.defineProperty(t,o,d),d},__awaiter=this&&this.__awaiter||function(e,t,o,r){return new(o||(o=Promise))(function(a,s){function d(e){try{n(r.next(e))}catch(e){s(e)}}function i(e){try{n(r.throw(e))}catch(e){s(e)}}function n(e){var t;e.done?a(e.value):((t=e.value)instanceof o?t:new o(function(e){e(t)})).then(d,i)}n((r=r.apply(e,t||[])).next())})};import{css as e,html as t,LitElement as o}from"lit";import{customElement as r,property as a}from"lit/decorators.js";import{InputType as s}from"@openremote/or-mwc-components/or-mwc-input";import"@openremote/or-icon";import{style as d}from"./style";import i from"@openremote/core";import"@openremote/or-mwc-components/or-mwc-menu";import{showOkCancelDialog as n}from"@openremote/or-mwc-components/or-mwc-dialog";import{i18next as h}from"@openremote/or-translate";import{showSnackbar as l}from"@openremote/or-mwc-components/or-mwc-snackbar";import{style as c}from"@openremote/or-asset-tree";import{DashboardService as p,DashboardSizeOption as u}from"./service/dashboard-service";import{isAxiosError as m}from"@openremote/rest";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 o{constructor(){super(...arguments),this.realm=i.displayRealm,this.readonly=!0,this.hasChanged=!1,this.showControls=!0}static get styles(){return[d,treeStyling,c]}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 i.rest.api.DashboardResource.getAllRealmDashboards(this.realm).then(e=>{this.dashboards=e.data}).catch(e=>{console.error(e),l(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){p.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),m(e)&&(null==(t=e.response)?void 0:t.status)===404?l(void 0,"noDashboardFound"):l(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=Math.random().toString(36).slice(2,String(t.template.id).length+2)),p.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),m(e)&&(null==(t=e.response)?void 0:t.status)===404?l(void 0,"noDashboardFound"):l(void 0,"errorOccurred")})}deleteDashboard(e){null!=e.id&&p.delete(e.id,this.realm).then(()=>{this.getAllDashboards()}).catch(e=>{console.error(e),l(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">
                        ${null!=this.selected?t`
                            <or-mwc-input type="${s.BUTTON}" icon="close" title="${h.t("deselect")}" @or-mwc-input-changed="${()=>{this.selectDashboard(void 0)}}"></or-mwc-input>
                            ${!this.readonly?t`
                                <or-mwc-input type="${s.BUTTON}" class="hideMobile" icon="content-copy" title="${h.t("duplicate")}"
                                              @or-mwc-input-changed="${()=>{this.duplicateDashboard(this.selected)}}"
                                ></or-mwc-input>
                                <or-mwc-input type="${s.BUTTON}" icon="delete" title="${h.t("delete")}" @or-mwc-input-changed="${()=>{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-mwc-input>
                            `:void 0}
                        `:void 0}
                        ${!this.readonly?t`
                            <or-mwc-input type="${s.BUTTON}" class="hideMobile" icon="plus" title="${h.t("addInsights")}"
                                          @or-mwc-input-changed="${()=>{this.createDashboard(u.DESKTOP)}}"
                            ></or-mwc-input>
                        `:void 0}
                    </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([a()],OrDashboardTree.prototype,"dashboards",void 0),__decorate([a()],OrDashboardTree.prototype,"selected",void 0),__decorate([a()],OrDashboardTree.prototype,"realm",void 0),__decorate([a()],OrDashboardTree.prototype,"userId",void 0),__decorate([a()],OrDashboardTree.prototype,"readonly",void 0),__decorate([a()],OrDashboardTree.prototype,"hasChanged",void 0),__decorate([a()],OrDashboardTree.prototype,"showControls",void 0),OrDashboardTree=__decorate([r("or-dashboard-tree")],OrDashboardTree);export{OrDashboardTree};