import '../../../../assert/js/assert.js';
import '../../../../globals.js';
import { Shape } from '../../../../kite/js/imports.js';
import { HBox, Node, Path, VBox } from '../../../../scenery/js/imports.js';
import LetterKeyNode from '../../keyboard/LetterKeyNode.js';
import PhetFont from '../../PhetFont.js';
import sceneryPhet from '../../sceneryPhet.js';
// constants
const ARROW_HEIGHT = 15; // dimensions for the arrow icons
const KEY_HEIGHT = 24; // height of the arrow key, larger than default KeyNode height
const ARROW_WIDTH = 1 / 2 * Math.sqrt(3) * ARROW_HEIGHT; // for equilateral triangle
const SHADOW_OFFSET = 2;
const LETTER_KEY_OPTIONS = {
    font: new PhetFont(14),
    keyHeight: KEY_HEIGHT,
    xShadowOffset: SHADOW_OFFSET,
    yShadowOffset: SHADOW_OFFSET
};
const KEY_ARROW_SPACING = 2;
const KEY_SPACING = 8;
// possible directions or the directional cues
const DIRECTION_ANGLES = {
    up: 0,
    down: Math.PI,
    left: -Math.PI / 2,
    right: Math.PI / 2
};
export default class WASDCueNode extends Node {
    constructor(boundsProperty) {
        super();
        this.wNode = WASDCueNode.createMovementKeyNode('up');
        this.aNode = WASDCueNode.createMovementKeyNode('left');
        this.sNode = WASDCueNode.createMovementKeyNode('down');
        this.dNode = WASDCueNode.createMovementKeyNode('right');
        const directionKeysParent = new Node({
            children: [
                this.wNode,
                this.aNode,
                this.sNode,
                this.dNode
            ]
        });
        this.addChild(directionKeysParent);
        const boundsListener = (bounds) => {
            // place the direction cues relative to the object bounds
            this.wNode.centerBottom = bounds.getCenterTop().plusXY(0, -KEY_SPACING);
            this.aNode.rightCenter = bounds.getLeftCenter().plusXY(-KEY_SPACING, 0);
            this.sNode.centerTop = bounds.getCenterBottom().plusXY(0, KEY_SPACING + SHADOW_OFFSET);
            this.dNode.leftCenter = bounds.getRightCenter().plusXY(KEY_SPACING + SHADOW_OFFSET, 0);
        };
        boundsProperty.link(boundsListener);
        this.disposeEmitter.addListener(() => {
            boundsProperty.unlink(boundsListener);
            this.wNode.dispose();
            this.aNode.dispose();
            this.sNode.dispose();
            this.dNode.dispose();
        });
    }
    /**
     * Create a node that looks like a keyboard letter key next to an arrow indicating the direction the balloon
     * would move if that key is pressed.
     */
    static createMovementKeyNode(direction) {
        // create the arrow icon
        const arrowShape = new Shape();
        arrowShape.moveTo(ARROW_HEIGHT / 2, 0).lineTo(ARROW_HEIGHT, ARROW_WIDTH).lineTo(0, ARROW_WIDTH).close();
        const arrowIcon = new Path(arrowShape, {
            fill: 'white',
            stroke: 'black',
            lineJoin: 'bevel',
            lineCap: 'butt',
            lineWidth: 2,
            rotation: DIRECTION_ANGLES[direction]
        });
        // create the letter key nodes and place in the correct layout box
        let keyIcon;
        let box;
        if (direction === 'up') {
            keyIcon = LetterKeyNode.w(LETTER_KEY_OPTIONS);
            box = new VBox({ children: [arrowIcon, keyIcon], spacing: KEY_ARROW_SPACING });
        }
        else if (direction === 'left') {
            keyIcon = LetterKeyNode.a(LETTER_KEY_OPTIONS);
            box = new HBox({ children: [arrowIcon, keyIcon], spacing: KEY_ARROW_SPACING });
        }
        else if (direction === 'right') {
            keyIcon = LetterKeyNode.d(LETTER_KEY_OPTIONS);
            box = new HBox({ children: [keyIcon, arrowIcon], spacing: KEY_ARROW_SPACING });
        }
        else if (direction === 'down') {
            keyIcon = LetterKeyNode.s(LETTER_KEY_OPTIONS);
            box = new VBox({ children: [keyIcon, arrowIcon], spacing: KEY_ARROW_SPACING });
        }
        assert && assert(box, `No box created for direction ${direction}`);
        box.disposeEmitter.addListener(() => keyIcon.dispose());
        return box;
    }
}
sceneryPhet.register('WASDCueNode', WASDCueNode);
//# sourceMappingURL=WASDCueNode.js.map