// #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 { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Watch } from '../../../Decorators/WatchDecorator';
import { ModifierKeys } from '../../../Types/Key';
import { CustomElement } from '../../Abstracts/CustomElement';
// #endregion
/**
 * KbdShortcutElement - Represents a user interface element for defining and executing keyboard shortcuts.
 *
 * @element mosaik-kbd-shortcut
 *
 * @description
 * The KbdShortcutElement allows users to define and execute keyboard shortcuts within an application or interface.
 * It provides a visual representation of the keyboard keys or combinations to be pressed by the user to trigger
 * specific actions or commands.
 *
 * @category Interaction
 *
 * @example
 * ```html
 * <mosaik-kbd-shortcut keys="Ctrl+C" command="copyAction"></mosaik-kbd-shortcut>
 * ```
 *
 * @property {string} keys - Specifies the key combination or sequence required to execute the shortcut.
 * @property {string} command - Associates the shortcut with a specific command or action within the application.
 *
 * @public
 */
let KbdShortcutElement = class KbdShortcutElement extends Disableable(CustomElement) {
    // #region Fields
    _gesture;
    _keyDownSubscription;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._gesture = null;
        this._keyDownSubscription = null;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-kbd-shortcut';
    }
    /**
     * Gets or sets the `gesture` property.
     *
     * @public
     * @attr
     */
    get gesture() {
        return this._gesture;
    }
    set gesture(value) {
        if (this._gesture !== value) {
            this._gesture = value;
            this.requestUpdate('gesture');
        }
    }
    // #endregion
    // #region Methods
    /**
     * @protected
     */
    onGesturePropertyChanged(prev, next) {
        if (prev !== next) {
            if (next) {
                this._keyDownSubscription?.dispose();
                this._keyDownSubscription = on(window, 'keydown', (e) => this.onKeyDown(e));
            }
            else {
                this._keyDownSubscription?.dispose();
            }
        }
    }
    /**
     * @private
     */
    onKeyDown(e) {
        const modeKey = this.getModifierKey(e);
        if (this._gesture?.modifiers === modeKey && this._gesture.key.toLowerCase() === e.key.toLowerCase()) {
            e.preventDefault();
            console.log('Shortcut executed');
            this.emit('change');
        }
    }
    /**
     * Determines the modifier key based on the keyboard event.
     * @param {KeyboardEvent} e - The keyboard event.
     * @returns {ModifierKeys} - The determined modifier key.
     */
    getModifierKey(e) {
        if (e.altKey) {
            return ModifierKeys.Alt;
        }
        if (e.ctrlKey) {
            return ModifierKeys.Control;
        }
        if (e.metaKey) {
            return ModifierKeys.Meta;
        }
        if (e.shiftKey) {
            return ModifierKeys.Shift;
        }
        return ModifierKeys.None;
    }
};
__decorate([
    Attribute({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], KbdShortcutElement.prototype, "gesture", null);
__decorate([
    Watch('gesture'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object, Object]),
    __metadata("design:returntype", void 0)
], KbdShortcutElement.prototype, "onGesturePropertyChanged", null);
KbdShortcutElement = __decorate([
    Component({
        selector: 'mosaik-kbd-shortcut',
        imports: []
    }),
    __metadata("design:paramtypes", [])
], KbdShortcutElement);
export { KbdShortcutElement };
//# sourceMappingURL=KbdShortcutElement.js.map