"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = void 0;
const color_1 = require("../../../../../client/color");
const element_1 = require("../../../../../client/element");
const keyboard_1 = require("../../../../../client/event/keyboard");
const keyCode_1 = require("../../../../../client/event/keyboard/keyCode");
const pointerdown_1 = require("../../../../../client/event/pointer/pointerdown");
const parentElement_1 = require("../../../../../client/platform/web/parentElement");
const userSelect_1 = require("../../../../../client/util/style/userSelect");
const Component_1 = require("../../../component/Icon/Component");
const Component_2 = require("../../Button/Component");
exports.DEFAULT_STYLE = {
    height: '100%',
    width: '100%',
    background: 'none',
};
class KeyboardKey extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._get_style = () => {
            const { style = {} } = this.$props;
            let { color = 'currentColor' } = style;
            color = (0, color_1.nameToColor)(color) || color;
            return {
                ...exports.DEFAULT_STYLE,
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: `calc(100%)`,
                width: `calc(100%)`,
                overflow: 'hidden',
                ...(0, userSelect_1.userSelect)('none'),
                color,
                border: `1px solid ${color}`,
                fontSize: '14px',
                borderRadius: '2px',
                boxSizing: 'border-box',
                cursor: 'pointer',
                textAlign: 'center',
                ...style,
            };
        };
        const { key = 'a', location = 0 } = this.$props;
        const icon = keyboard_1.keyToIcon[key];
        const code = keyCode_1.keyToCode[key];
        const keyCode = keyCode_1.keyToKeyCode[key];
        const style = this._get_style();
        const key_component = new Component_2.default({
            style,
            innerText: icon ? undefined : key,
        }, this.$system);
        key_component.addEventListener((0, pointerdown_1.makePointerDownListener)(() => {
            // emitKeyboardEvent(this.$system, 'keydown', {
            //   key,
            //   keyCode,
            //   code,
            //   shiftKey: false,
            //   ctrlKey: false,
            //   metaKey: false,
            //   bubbles: true,
            // })
            // // TODO 'keypress' should not be fired if key is a control key (e.g. ALT, CTRL, SHIFT, ESC)
            // emitKeyboardEvent(this.$system, 'keypress', {
            //   key,
            //   keyCode,
            //   code,
            //   shiftKey: false,
            //   ctrlKey: false,
            //   metaKey: false,
            //   bubbles: true,
            // })
        }));
        // key_component.addEventListener(
        //   makePointerUpListener(() => {
        //     emitKeyboardEvent(this.$system, 'keyup', {
        //       key,
        //       keyCode,
        //       code,
        //       shiftKey: false,
        //       ctrlKey: false,
        //       metaKey: false,
        //       bubbles: true,
        //     })
        //   })
        // )
        this._key = key_component;
        if (icon !== undefined) {
            const icon_component = new Component_1.default({
                icon,
                style: {
                    width: '18px',
                    height: '18px',
                },
            }, this.$system);
            key_component.setChildren([icon_component]);
        }
        const $element = (0, parentElement_1.parentElement)($system);
        this.$element = $element;
        this.$slot = key_component.$slot;
        this.$unbundled = false;
        this.$primitive = true;
        this.setSubComponents({
            key: key_component,
        });
        this.registerRoot(key_component);
    }
    onPropChanged(prop, current) {
        if (prop === 'style') {
            const style = this._get_style();
            this._key.setProp('style', style);
        }
    }
}
exports.default = KeyboardKey;
//# sourceMappingURL=Component.js.map