/*
 * Copyright (C) 2016-2020 Kano Computing Ltd.
 * License: http://www.gnu.org/licenses/gpl-2.0.txt GNU General Public License v2
 */
import { FieldDropdown, WidgetDiv } from '@kano/kwc-blockly/blockly.js';
import { BlocklyValueStepHelper } from './value.js';
import { BeaconWidget } from '../../../../challenge/widget/beacon.js';
class DropdownBeaconWidget extends BeaconWidget {
    getPosition() { return 'dropdown-target:0,50'; }
    getDomNode() {
        const node = super.getDomNode();
        node.style.zIndex = '200000';
        return node;
    }
}
export class DropdownFieldStepHelper extends BlocklyValueStepHelper {
    constructor() {
        super(...arguments);
        this.beacon = null;
    }
    test(challenge, step) {
        if (!super.test(challenge, step)) {
            return false;
        }
        const field = this.getField(challenge, step);
        return field && field.constructor === FieldDropdown;
    }
    setupBeacon(challenge) {
        if (!this.beacon) {
            this.beacon = new DropdownBeaconWidget();
            challenge.editor.addContentWidget(this.beacon);
            const engineBeacon = challenge.widgets.get('beacon');
            if (engineBeacon) {
                const node = engineBeacon.getDomNode();
                node.style.opacity = '0';
            }
        }
    }
    removeBeacon(challenge) {
        if (this.beacon) {
            challenge.editor.removeContentWidget(this.beacon);
            this.beacon = null;
            const engineBeacon = challenge.widgets.get('beacon');
            if (engineBeacon) {
                const node = engineBeacon.getDomNode();
                node.style.opacity = '';
            }
        }
    }
    enter(challenge, step) {
        const field = this.getField(challenge, step);
        const options = field.getOptions();
        const targetIndex = options.findIndex(([, value]) => value === step.validation.blockly.value.value);
        if (!challenge.workspace) {
            return;
        }
        this.tagHandler = challenge.editor.queryEngine.registerTagHandler('dropdown-target', () => {
            return {
                getHTMLElement() {
                    const items = [...WidgetDiv.DIV.querySelectorAll('.goog-menuitem')];
                    const item = items[targetIndex];
                    if (!item) {
                        throw new Error('Could not find dropdown target');
                    }
                    return item;
                },
                getId() { return 'dropdown-target'; }
            };
        });
        // Listen to changes in the editor. For each change, add or remove the beacon
        this.listener = (e) => {
            const items = [...WidgetDiv.DIV.querySelectorAll('.goog-menuitem')];
            const item = items[targetIndex];
            if (item) {
                this.setupBeacon(challenge);
            }
            else {
                this.removeBeacon(challenge);
            }
        };
        challenge.workspace.addChangeListener(this.listener);
    }
    leave(challenge, step) {
        if (this.listener && challenge.workspace) {
            challenge.workspace.removeChangeListener(this.listener);
        }
        if (this.beacon) {
            challenge.editor.removeContentWidget(this.beacon);
            this.beacon = null;
        }
        if (this.tagHandler) {
            this.tagHandler.dispose();
        }
    }
}
//# sourceMappingURL=dropdown.js.map