// #region Imports
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 __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { on } from '@breadstone/mosaik-elements';
import { Disableable } from '../../../Behaviors/Disableable';
import { Slottable } from '../../../Behaviors/Slottable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Watch } from '../../../Decorators/WatchDecorator';
import { SelectionMode } from '../../../Types/SelectionMode';
import { SelectorElement } from '../Abstracts/Selector/SelectorElement';
import { treeElementTemplate } from './TreeElementTemplate';
import { TreeItemElement } from './TreeItemElement';
import { treeElementJoyStyle } from './Themes/TreeElement.Joy';
import { treeElementRetroStyle } from './Themes/TreeElement.Retro';
import { treeElementCosmopolitanStyle } from './Themes/TreeElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
// #endregion
/**
 * The `{@link TreeElement}` element.
 *
 * @public
 */
let TreeElement = class TreeElement extends Themeable(Disableable(Slottable(SelectorElement))) {
    // #region Fields
    _itemsClickSubscriptions;
    _selectionMode;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._selectionMode = SelectionMode.Single;
        this._itemsClickSubscriptions = new Array();
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @override
     * @readonly
     */
    static get is() {
        return 'mosaik-tree';
    }
    /**
     * Gets or sets the `selectionMode` property.
     *
     * @public
     * @attr
     */
    get selectionMode() {
        return this._selectionMode;
    }
    set selectionMode(value) {
        if (this._selectionMode !== value) {
            this._selectionMode = value;
            this.requestUpdate('selectionMode');
        }
    }
    /**
     * Gets all the list items in the list.
     *
     * @public
     * @override
     */
    get items() {
        return super.items
            .flatMap((x) => x instanceof TreeItemElement ? x.items : x)
            .filter((x) => x instanceof TreeItemElement);
    }
    // #endregion
    // #region Methods
    /**
     * @protected
     * @override
     */
    onItemsChanged() {
        super.onItemsChanged();
        // reset all click handler if items are changed.
        this._itemsClickSubscriptions.forEach((x) => x.dispose());
        this.items.forEach((x) => {
            this._itemsClickSubscriptions.push(on(x, 'click', () => {
                if (x.disabled) {
                    return;
                }
                this.onSelectItem(x);
            }, false));
        });
        // TODO: implement this
        // const current = this.items.find(x => x.value === this.value);
        // if (current) {
        //     this.onSelectItem(current);
        // }
    }
    onSelectionModePropertyChanged(prev, next) {
        if (prev !== next) {
            if (next) {
                // request update children changed
                this.items.forEach((x) => x.requestUpdate());
            }
        }
    }
    onDisabledPropertyChanged(_prev, next) {
        if (next) {
            this.items.forEach((x) => {
                x.disabled = next;
            });
        }
    }
    /**
     * @private
     */
    onSelectItem(_item) {
    }
};
__decorate([
    Attribute({ type: SelectionMode }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], TreeElement.prototype, "selectionMode", null);
__decorate([
    Watch('selectionMode'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [String, String]),
    __metadata("design:returntype", void 0)
], TreeElement.prototype, "onSelectionModePropertyChanged", null);
__decorate([
    Watch('disabled'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Boolean, Boolean]),
    __metadata("design:returntype", void 0)
], TreeElement.prototype, "onDisabledPropertyChanged", null);
TreeElement = __decorate([
    Component({
        selector: 'mosaik-tree',
        template: treeElementTemplate,
        themes: {
            joy: treeElementJoyStyle,
            retro: treeElementRetroStyle,
            cosmopolitan: treeElementCosmopolitanStyle
        },
        imports: []
    }),
    __metadata("design:paramtypes", [])
], TreeElement);
export { TreeElement };
//# sourceMappingURL=TreeElement.js.map