var __decorate=this&&this.__decorate||function(e,t,i,r){var s,d=arguments.length,o=d<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,r);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(o=(d<3?s(o):d>3?s(t,i,o):s(t,i))||o);return d>3&&o&&Object.defineProperty(t,i,o),o};import{GridStack as e}from"gridstack";import{css as t,html as i,LitElement as r,unsafeCSS as s}from"lit";import{customElement as d,property as o,query as a,state as c}from"lit/decorators.js";import{style as n}from"./style";import{widgetTypes as m}from"./index";import{when as l}from"lit/directives/when.js";import{repeat as h}from"lit/directives/repeat.js";let gridcss=require("gridstack/dist/gridstack.min.css"),browserStyling=t`
    #sidebar {
        display: grid;
        padding: 16px;
    }
    #sidebarElement, #sidebarBgElement {
        grid-column: 1;
        grid-row: 1;
    }
    .grid-stack-item {
        cursor: grab;
    }
    .sidebarItem {
        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 r{constructor(){super(...arguments),this.columns=4,this.size=2,this.itemSize=134,this.items=new Map(m),this.sidebarHeight=this._getSidebarHeight(this.columns)}static get styles(){return[s(gridcss),browserStyling,n]}updated(e){var t,i;return null==(i=null==(t=this.sidebarGrid)?void 0:t.getGridItems())||i.forEach(e=>{var t;e.gridstackNode&&(e.gridstackNode.widgetTypeId=null!=(t=e.getAttribute("gs-id"))?t:e.id)}),super.updated(e)}firstUpdated(e){return this.renderGrid(),super.firstUpdated(e)}renderGrid(){void 0!==this.sidebarGrid&&this.sidebarGrid.destroy(!1),this.sidebarGrid=e.init({acceptWidgets:!1,animate:!1,column:this.columns,cellHeight:this.itemSize/(this.columns/this.size),disableResize:!0,removable:!1,draggable:{appendTo:"parent"},margin:8,row:this.sidebarHeight},this.sidebarElem),this.sidebarGrid.on("removed",(e,t)=>{let i=new Map(this.items);t.map(e=>e.widgetTypeId).forEach(e=>this.items.delete(e)),this.items=new Map(this.items),this.updateComplete.then(()=>{this.items=i,this.updateComplete.then(()=>this.renderGrid())})}),void 0!==this.backgroundGrid&&this.backgroundGrid.destroy(!1),this.backgroundGrid=e.init({acceptWidgets:!1,animate:!1,staticGrid:!0,column:this.columns,cellHeight:this.itemSize/(this.columns/this.size),margin:8},this.backgroundElem)}render(){return i`
            <div id="sidebar">
                <div id="sidebarElement" class="grid-stack" style="width: 100%; z-index: 3;">
                    ${h(this.items,([e])=>e,([e,t])=>this._getSidebarItemTemplate(e,e,t))}
                    ${l(this.items.size%2!=0,()=>this._getEmptyItemTemplate())}
                </div>
                <div id="sidebarBgElement" class="grid-stack" style="width: 100%; z-index: 2">
                    ${h(this.items,([e])=>e,([e,t])=>this._getSidebarItemTemplate(`bg-${e}`,e,t))}
                    ${l(this.items.size%2!=0,()=>this._getEmptyItemTemplate())}
                </div>
            </div>
        `}_getSidebarItemTemplate(e,t,r){return i`
            <div class="grid-stack-item" id=${e} gs-id=${t} gs-w=${this.size} gs-h=${this.size} gs-locked="true">
                <div class="grid-stack-item-content sidebarItem">
                    <or-icon icon="${r.displayIcon}"></or-icon>
                    <span class="itemText">${r.displayName}</span>
                </div>
            </div>
        `}_getEmptyItemTemplate(){return i`
            <div class="grid-stack-item" gs-id="empty" gs-w=${this.size} gs-h=${this.size} gs-locked="true" gs-no-move="true" style="cursor: default;">
                <div class="grid-stack-item-content"></div>
            </div>
        `}_getSidebarHeight(e=this.columns,t=this.size){let i=Math.ceil(m.size/(e/t)*t);return i%t!=0&&i++,i}};__decorate([o({type:Number})],OrDashboardBrowser.prototype,"columns",void 0),__decorate([o({type:Number})],OrDashboardBrowser.prototype,"size",void 0),__decorate([o({type:Number})],OrDashboardBrowser.prototype,"itemSize",void 0),__decorate([c()],OrDashboardBrowser.prototype,"sidebarGrid",void 0),__decorate([c()],OrDashboardBrowser.prototype,"backgroundGrid",void 0),__decorate([c()],OrDashboardBrowser.prototype,"items",void 0),__decorate([a("#sidebarElement")],OrDashboardBrowser.prototype,"sidebarElem",void 0),__decorate([a("#sidebarBgElement")],OrDashboardBrowser.prototype,"backgroundElem",void 0),OrDashboardBrowser=__decorate([d("or-dashboard-browser")],OrDashboardBrowser);export{OrDashboardBrowser};