"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = void 0;
exports.emitPhoneKey = emitPhoneKey;
const mergeStyle_1 = require("../../../../../client/component/mergeStyle");
const element_1 = require("../../../../../client/element");
const keyboard_1 = require("../../../../../client/event/keyboard");
const keyCode_1 = require("../../../../../client/event/keyboard/keyCode");
const write_1 = require("../../../../../client/event/keyboard/write");
const click_1 = require("../../../../../client/event/pointer/click");
const pointercancel_1 = require("../../../../../client/event/pointer/pointercancel");
const pointerdown_1 = require("../../../../../client/event/pointer/pointerdown");
const pointerenter_1 = require("../../../../../client/event/pointer/pointerenter");
const pointerleave_1 = require("../../../../../client/event/pointer/pointerleave");
const pointerup_1 = require("../../../../../client/event/pointer/pointerup");
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("../../../core/component/TextBox/Component");
const Component_3 = require("../../Div/Component");
exports.DEFAULT_STYLE = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: `calc(100%)`,
    width: `calc(100%)`,
    overflow: 'hidden',
    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._pointer_in = false;
        this._pointer_down = false;
        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._refresh_background = () => {
            // console.log('PhoneKeyboardKey', '_refresh_background')
            var _a;
            const { $theme, $color } = this.$context;
            const { active, style = {} } = this.$props;
            const background = this._pointer_in
                ? $theme === 'dark'
                    ? '#00000066'
                    : '#00000011'
                : (_a = style.backgroundColor) !== null && _a !== void 0 ? _a : '#00000022';
            if (active) {
                (0, mergeStyle_1.mergePropStyle)(this._key, {
                    backgroundImage: `radial-gradient(currentColor 20%, transparent 20%)`,
                    backgroundSize: '3px 3px',
                    background,
                });
            }
            else {
                if (this._pointer_down) {
                    (0, mergeStyle_1.mergePropStyle)(this._key, {
                        backgroundImage: `radial-gradient(circle, currentColor 15%, transparent 10%)`,
                        backgroundSize: '6px 6px',
                        backgroundPosition: '0.75px 0px',
                        background,
                    });
                }
                else {
                    (0, mergeStyle_1.mergePropStyle)(this._key, {
                        background,
                        backgroundImage: '',
                        backgroundSize: '',
                    });
                }
            }
        };
        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);
            this.dispatchEvent('key', key);
        };
        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_2.default({
            value: key_text_value,
            style: {
                width: 'auto',
                height: 'auto',
                ...(0, userSelect_1.userSelect)('none'),
            },
        }, this.$system);
        this._key_text = key_text;
        const alt_key_text = new Component_2.default({
            value: icon ? undefined : alt,
            style: {
                width: 'auto',
                height: 'auto',
                right: '3px',
                top: '3px',
                fontSize: '12px',
                position: 'absolute',
                ...(0, userSelect_1.userSelect)('none'),
            },
        }, this.$system);
        const key_component = new Component_3.default({
            style: { ...exports.DEFAULT_STYLE, ...style },
        }, this.$system);
        const releasePointer = (pointerId) => {
            this._pointer_down = false;
            if (this._key.hasPointerCapture(pointerId)) {
                this._key.releasePointerCapture(pointerId);
            }
        };
        key_component.addEventListeners([
            (0, click_1.makeClickListener)({
                onClick: () => {
                    // console.log('PhoneKeyboardKey', 'onClick')
                    const { key } = this.$props;
                    if (key !== undefined) {
                        this._emit_key(key);
                    }
                },
                onLongPress: () => {
                    // console.log('PhoneKeyboardKey', 'onLongPress')
                    const { alt } = this.$props;
                    if (alt === undefined) {
                        //
                    }
                    else {
                        this._emit_key(alt);
                    }
                },
            }),
            (0, pointerenter_1.makePointerEnterListener)(() => {
                this._pointer_in = true;
                this._refresh_background();
            }),
            (0, pointerdown_1.makePointerDownListener)((event) => {
                const { pointerId } = event;
                this._key.setPointerCapture(pointerId);
                this._pointer_down = true;
                this._refresh_background();
            }),
            (0, pointerup_1.makePointerUpListener)((event) => {
                const { pointerId } = event;
                releasePointer(pointerId);
                this._refresh_background();
            }),
            (0, pointerleave_1.makePointerLeaveListener)((event) => {
                const { pointerId } = event;
                if (this._pointer_down) {
                    releasePointer(pointerId);
                }
                this._pointer_in = false;
                this._refresh_background();
            }),
            (0, pointercancel_1.makePointerCancelListener)((event) => {
                const { pointerId } = event;
                if (this._pointer_down) {
                    releasePointer(pointerId);
                }
            }),
        ]);
        key_component.preventDefault('mousedown');
        key_component.preventDefault('touchstart');
        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]);
        }
        else {
            key_component.setChildren([key_text, alt_key_text]);
        }
        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') {
            this._key.setProp('style', { ...exports.DEFAULT_STYLE, ...current });
        }
        else if (prop === 'shiftKey') {
            this._refresh_key_text_value();
        }
        else if (prop === 'altKey') {
            this._refresh_key_text_value();
        }
        else if (prop === 'active') {
            this._refresh_background();
        }
    }
}
exports.default = PhoneKeyboardKey;
function emitPhoneKey(system, key, shiftKey, altKey) {
    const keyCode = keyCode_1.keyToKeyCode[key];
    const code = keyCode_1.keyToCode[key];
    (0, write_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, write_1.emitKeyboardEvent)(system, 'keypress', {
        key,
        keyCode,
        code,
        shiftKey,
        altKey,
        ctrlKey: false,
        metaKey: false,
        bubbles: true,
    });
    (0, write_1.emitKeyboardEvent)(system, 'keyup', {
        key,
        keyCode,
        code,
        shiftKey,
        altKey,
        ctrlKey: false,
        metaKey: false,
        bubbles: true,
    });
}
//# sourceMappingURL=Component.js.map