var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var IgcTileManagerComponent_1;
import { ContextProvider } from '@lit/context';
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { styleMap } from 'lit/directives/style-map.js';
import { themes } from '../../theming/theming-decorator.js';
import { tileManagerContext, } from '../common/context.js';
import { createMutationController, } from '../common/controllers/mutation-observer.js';
import { registerComponent } from '../common/definitions/register.js';
import { asNumber, partNameMap } from '../common/util.js';
import { createTilesState } from './position.js';
import { createSerializer } from './serializer.js';
import { all } from './themes/container.js';
import { styles as shared } from './themes/shared/tile-manager.common.css.js';
import { styles } from './themes/tile-manager.base.css.js';
import IgcTileComponent from './tile.js';
let IgcTileManagerComponent = IgcTileManagerComponent_1 = class IgcTileManagerComponent extends LitElement {
    static register() {
        registerComponent(IgcTileManagerComponent_1, IgcTileComponent);
    }
    _createContext() {
        return {
            instance: this,
            grid: this._grid,
        };
    }
    _setManagerContext() {
        this._context.setValue(this._createContext(), true);
    }
    set resizeMode(value) {
        this._resizeMode = value;
        this._setManagerContext();
    }
    get resizeMode() {
        return this._resizeMode;
    }
    set dragMode(value) {
        this._dragMode = value;
        this._setManagerContext();
    }
    get dragMode() {
        return this._dragMode;
    }
    set columnCount(value) {
        this._columnCount = Math.max(0, asNumber(value));
        Object.assign(this._internalStyles, {
            '--column-count': this._columnCount || undefined,
        });
    }
    get columnCount() {
        return this._columnCount;
    }
    set minColumnWidth(value) {
        this._minColWidth = value ?? undefined;
        Object.assign(this._internalStyles, {
            '--min-col-width': this._minColWidth,
        });
    }
    get minColumnWidth() {
        return this._minColWidth;
    }
    set minRowHeight(value) {
        this._minRowHeight = value ?? undefined;
        Object.assign(this._internalStyles, {
            '--min-row-height': this._minRowHeight,
        });
    }
    get minRowHeight() {
        return this._minRowHeight;
    }
    set gap(value) {
        this._gap = value ?? undefined;
        Object.assign(this._internalStyles, {
            '--grid-gap': this._gap,
        });
    }
    get gap() {
        return this._gap;
    }
    get tiles() {
        return this._tilesState.tiles;
    }
    constructor() {
        super();
        this._internalStyles = {};
        this._dragMode = 'none';
        this._resizeMode = 'none';
        this._columnCount = 0;
        this._serializer = createSerializer(this);
        this._tilesState = createTilesState(this);
        this._grid = createRef();
        this._context = new ContextProvider(this, {
            context: tileManagerContext,
            initialValue: this._createContext(),
        });
        createMutationController(this, {
            callback: this._observerCallback,
            filter: [IgcTileComponent.tagName],
            config: {
                childList: true,
            },
        });
    }
    updated() {
        this._tilesState.adjustTileGridPosition();
    }
    firstUpdated() {
        this._tilesState.assignPositions();
        this._tilesState.assignTiles();
        this._setManagerContext();
    }
    _observerCallback({ changes: { added, removed }, }) {
        const ownAdded = added.filter(({ target }) => target.closest(this.tagName) === this);
        const ownRemoved = removed.filter(({ target }) => target.closest(this.tagName) === this);
        for (const remove of ownRemoved) {
            this._tilesState.remove(remove.node);
        }
        for (const added of ownAdded) {
            this._tilesState.add(added.node);
        }
        this._tilesState.assignTiles();
    }
    saveLayout() {
        return this._serializer.saveAsJSON();
    }
    loadLayout(data) {
        this._serializer.loadFromJSON(data);
    }
    render() {
        const parts = partNameMap({
            base: true,
            'maximized-tile': this.tiles.some((tile) => tile.maximized),
        });
        return html `
      <div
        ${ref(this._grid)}
        style=${styleMap(this._internalStyles)}
        part=${parts}
      >
        <slot></slot>
      </div>
    `;
    }
};
IgcTileManagerComponent.tagName = 'igc-tile-manager';
IgcTileManagerComponent.styles = [styles, shared];
IgcTileManagerComponent.shadowRootOptions = {
    mode: 'open',
    slotAssignment: 'manual',
};
__decorate([
    property({ attribute: 'resize-mode' })
], IgcTileManagerComponent.prototype, "resizeMode", null);
__decorate([
    property({ attribute: 'drag-mode' })
], IgcTileManagerComponent.prototype, "dragMode", null);
__decorate([
    property({ type: Number, attribute: 'column-count' })
], IgcTileManagerComponent.prototype, "columnCount", null);
__decorate([
    property({ attribute: 'min-column-width' })
], IgcTileManagerComponent.prototype, "minColumnWidth", null);
__decorate([
    property({ attribute: 'min-row-height' })
], IgcTileManagerComponent.prototype, "minRowHeight", null);
__decorate([
    property()
], IgcTileManagerComponent.prototype, "gap", null);
IgcTileManagerComponent = IgcTileManagerComponent_1 = __decorate([
    themes(all)
], IgcTileManagerComponent);
export default IgcTileManagerComponent;
//# sourceMappingURL=tile-manager.js.map