"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.emitPhoneKey = exports.DEFAULT_STYLE = void 0;
const element_1 = require("../../../../../client/element");
const keyboard_1 = require("../../../../../client/event/keyboard");
const keyCode_1 = require("../../../../../client/event/keyboard/keyCode");
const click_1 = require("../../../../../client/event/pointer/click");
const parentElement_1 = require("../../../../../client/platform/web/parentElement");
const userSelect_1 = require("../../../../../client/util/style/userSelect");
const Component_1 = require("../../../component/Div/Component");
const Component_2 = require("../../../component/Icon/Component");
const Component_3 = require("../../../core/component/TextBox/Component");
exports.DEFAULT_STYLE = Object.assign(Object.assign(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', height: `calc(100%)`, width: `calc(100%)`, overflow: 'hidden' }, (0, userSelect_1.userSelect)('none')), { color: 'currentColor', borderWidth: '1px', borderStyle: 'solid', borderColor: 'currentColor', borderRadius: '2px', fontSize: '18px', boxSizing: 'border-box', cursor: 'pointer', textAlign: 'center', paddingTop: '9px' }), (0, userSelect_1.userSelect)('none'));
class PhoneKeyboardKey extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._key_text_value = () => {
            const { key = 'a', alt = '', shiftKey = false, style = {} } = this.$props;
            const icon = keyboard_1.keyToIcon[key];
            const key_text_value = icon
                ? undefined
                : (0, keyCode_1.isChar)(key)
                    ? shiftKey
                        ? key.toUpperCase()
                        : key
                    : '';
            return key_text_value;
        };
        this._refresh_key_text_value = () => {
            const key_text_value = this._key_text_value();
            if (key_text_value) {
                this._key_text.setProp('value', key_text_value);
            }
        };
        this._emit_key = (key) => {
            const { shiftKey = false, altKey = false } = this.$props;
            const _key = shiftKey && (0, keyCode_1.isChar)(key) ? key.toUpperCase() : key;
            emitPhoneKey(this.$system, _key, shiftKey, altKey);
        };
        const { key = 'a', alt = '', shiftKey = false, style = {} } = this.$props;
        const key_text_value = this._key_text_value();
        const icon = keyboard_1.keyToIcon[key];
        const key_text = new Component_3.default({
            value: key_text_value,
            style: Object.assign({ width: 'auto', height: 'auto' }, (0, userSelect_1.userSelect)('none')),
        }, this.$system);
        this._key_text = key_text;
        const alt_key_text = new Component_3.default({
            value: icon ? undefined : alt,
            style: Object.assign({ width: 'auto', height: 'auto', right: '3px', top: '3px', fontSize: '12px', position: 'absolute' }, (0, userSelect_1.userSelect)('none')),
        }, this.$system);
        const key_component = new Component_1.default({
            style: Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style),
        }, this.$system);
        key_component.appendChild(key_text);
        key_component.appendChild(alt_key_text);
        key_component.addEventListener((0, click_1.makeClickListener)({
            onClick: () => {
                // console.log('PhoneKeyboardKey', 'onClick')
                const { key } = this.$props;
                if (key !== undefined) {
                    this._emit_key(key);
                }
            },
            onLongPress: () => {
                // log('PhoneKeyboardKey', 'onLongPress')
                const { alt } = this.$props;
                if (alt === undefined) {
                }
                else {
                    this._emit_key(alt);
                }
            },
        }));
        key_component.preventDefault('mousedown');
        key_component.preventDefault('touchstart');
        this._key = key_component;
        if (icon !== undefined) {
            const icon_component = new Component_2.default({
                icon,
                style: {
                    width: '18px',
                    height: '18px',
                },
            }, this.$system);
            key_component.setChildren([icon_component]);
        }
        const $element = (0, parentElement_1.default)($system);
        this.$element = $element;
        this.$slot = key_component.$slot;
        this.$subComponent = {
            key: key_component,
        };
        this.$unbundled = false;
        this.registerRoot(key_component);
    }
    onPropChanged(prop, current) {
        if (prop === 'style') {
            this._key.setProp('style', Object.assign(Object.assign({}, exports.DEFAULT_STYLE), current));
        }
        else if (prop === 'shiftKey') {
            this._refresh_key_text_value();
        }
        else if (prop === 'altKey') {
            this._refresh_key_text_value();
        }
    }
}
exports.default = PhoneKeyboardKey;
function emitPhoneKey(system, key, shiftKey, altKey) {
    const keyCode = keyCode_1.keyToKeyCode[key];
    const code = keyCode_1.keyToCode[key];
    (0, keyboard_1.emitKeyboardEvent)(system, 'keydown', {
        key,
        keyCode,
        code,
        shiftKey,
        altKey,
        ctrlKey: false,
        metaKey: false,
        bubbles: true,
    });
    // TODO 'keypress' should not be fired if key is a control key (e.g. ALT, CTRL, SHIFT, ESC)
    (0, keyboard_1.emitKeyboardEvent)(system, 'keypress', {
        key,
        keyCode,
        code,
        shiftKey,
        altKey,
        ctrlKey: false,
        metaKey: false,
        bubbles: true,
    });
    (0, keyboard_1.emitKeyboardEvent)(system, 'keyup', {
        key,
        keyCode,
        code,
        shiftKey,
        altKey,
        ctrlKey: false,
        metaKey: false,
        bubbles: true,
    });
}
exports.emitPhoneKey = emitPhoneKey;
//# sourceMappingURL=Component.js.map