var __decorate=this&&this.__decorate||function(e,r,i,t){var d,o=arguments.length,s=o<3?r:null===t?t=Object.getOwnPropertyDescriptor(r,i):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,r,i,t);else for(var a=e.length-1;a>=0;a--)(d=e[a])&&(s=(o<3?d(s):o>3?d(r,i,s):d(r,i))||s);return o>3&&s&&Object.defineProperty(r,i,s),s};import{GridStack as e}from"gridstack";import{css as r,html as i,LitElement as t,unsafeCSS as d}from"lit";import{customElement as o,state as s}from"lit/decorators.js";import{style as a}from"./style";import{widgetTypes as n}from"./index";let gridcss=require("gridstack/dist/gridstack.min.css"),extracss=require("gridstack/dist/gridstack-extra.css"),browserStyling=r`
    #sidebar {
        display: grid;
        padding: 16px;
    }
    #sidebarElement, #sidebarBgElement {
        grid-column: 1;
        grid-row: 1;
    }
    .grid-stack-item {
        cursor: grab;
    }
    .sidebarItem {
        height: 100%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid #E0E0E0;
        border-radius: 8px;
        box-sizing: border-box;
        flex-direction: column;
        font-size: 14px;
        --or-icon-width: 36px;
    }
    .itemText {
        margin-top: 10px;
    }
`,OrDashboardBrowser=class extends t{static get styles(){return[d(gridcss),d(extracss),browserStyling,a]}constructor(){super(),this.updateComplete.then(()=>{this.renderGrid()})}renderGrid(){var r,i;let t=null==(r=this.shadowRoot)?void 0:r.getElementById("sidebarElement"),d=this.generateGridCoords(Array.from(n).length),o=Array.from(n).sort((e,r)=>e[1].displayName.localeCompare(r[1].displayName)).map((e,r)=>({x:d[r][0],y:d[r][1],w:2,h:2,widgetTypeId:e[0],locked:!0,content:`<div class="sidebarItem"><or-icon icon="${e[1].displayIcon}"></or-icon><span class="itemText">${e[1].displayName}</span>`})),s=0;o.forEach(e=>{e.y+e.h>s&&(s=e.y+e.h)});let a=0;a=o.length%2!=0?o.length+1:o.length,void 0!==this.sidebarGrid?(this.sidebarGrid.removeAll(),this.sidebarGrid.load(o)):(this.sidebarGrid=e.init({acceptWidgets:!1,column:4,cellHeight:67,disableOneColumnMode:!0,disableResize:!0,draggable:{appendTo:"parent"},margin:8,row:a},t),this.sidebarGrid.load(o),this.sidebarGrid.on("removed",(e,r)=>{var i;if(1===r.length){let e=o.filter(e=>e.content===r[0].content);null==(i=this.sidebarGrid)||i.load([e[0]])}}),this.sidebarGrid.on("change",(e,r)=>{this.renderGrid()}));let l=null==(i=this.shadowRoot)?void 0:i.getElementById("sidebarBgElement");void 0!=this.backgroundGrid?this.backgroundGrid.removeAll():this.backgroundGrid=e.init({staticGrid:!0,column:4,cellHeight:67,disableOneColumnMode:!0,margin:8},l),this.backgroundGrid.load(o)}render(){return i`
            <div id="sidebar">
                <div id="sidebarElement" class="grid-stack" style="width: 100%; z-index: 3;"></div>
                <div id="sidebarBgElement" class="grid-stack" style="width: 100%; z-index: 2"></div>
            </div>
        `}generateGridCoords(e){let r=[],i=0,t=0;for(let d=0;d<e;d++)r.push([i,t]),0===i?i=2:(i=0,t+=2);return r}};__decorate([s()],OrDashboardBrowser.prototype,"sidebarGrid",void 0),__decorate([s()],OrDashboardBrowser.prototype,"backgroundGrid",void 0),OrDashboardBrowser=__decorate([o("or-dashboard-browser")],OrDashboardBrowser);export{OrDashboardBrowser};