import '../../assert/js/assert.js';
import '../../globals.js';
// Copyright 2020-2023, University of Colorado Boulder
/**
 * SpanNode shows a double-headed arrow pointing to parallel bars, and a text label. It is shown under a chart to
 * indicate the distance between gridlines.
 *
 * @author Sam Reid (PhET Interactive Simulations)
 */
import optionize, { combineOptions } from '../../phet-core/js/optionize.js';
import Orientation from '../../phet-core/js/Orientation.js';
import ArrowNode from '../../scenery-phet/js/ArrowNode.js';
import { FlowBox, Line, Node } from '../../scenery/js/imports.js';
import bamboo from './bamboo.js';
// Same as the value in Node's validateBounds
const notificationThreshold = 1e-13;
// Default option values for ArrowNode
const ARROW_NODE_OPTIONS = {
    doubleHead: true,
    headHeight: 4.5,
    headWidth: 5,
    tailWidth: 1.5,
    stroke: null // Not supported since it throws off the dimensions, use fill instead
};
class SpanNode extends FlowBox {
    /**
     * @param chartTransform
     * @param axisOrientation
     * @param delta - in model coordinates
     * @param labelNode
     * @param [providedOptions]
     */
    constructor(chartTransform, axisOrientation, delta, labelNode, providedOptions) {
        //TODO https://github.com/phetsims/bamboo/issues/21 support Orientation.VERTICAL
        assert && assert(axisOrientation !== Orientation.VERTICAL, 'Orientation.VERTICAL is not yet supported');
        const options = optionize()({
            // SelfOptions
            color: 'black',
            outerLineLength: 6, // length of the bars at the ends of each arrow
            // FlowBoxOptions
            spacing: 0 // between arrow and labelNode
        }, providedOptions);
        super();
        this.chartTransform = chartTransform;
        this.axisOrientation = axisOrientation;
        this.delta = delta;
        this.labelNode = labelNode;
        this.color = options.color;
        this.outerLineLength = options.outerLineLength;
        this.viewWidth = 0;
        this.arrowNodeOptions = combineOptions({
            fill: options.color // default to the color of the SpanNode, but can be overridden via arrowNodeOptions
        }, ARROW_NODE_OPTIONS, options.arrowNodeOptions);
        // Initialize
        this.update();
        // mutate after initializing, so that transform options work correctly
        this.mutate(options);
        // Update when the range of the associated axis changes.
        const changedListener = () => this.update();
        chartTransform.changedEmitter.addListener(changedListener);
        this.disposeSpanNode = () => chartTransform.changedEmitter.removeListener(changedListener);
    }
    /**
     * Sets delta and updates.
     * @param delta - in model coordinates
     */
    setDelta(delta) {
        if (delta !== this.delta) {
            this.delta = delta;
            this.update();
        }
    }
    update() {
        const viewWidth = this.chartTransform.modelToViewDelta(this.axisOrientation, this.delta);
        // If the view width changes a 'noticeable amount', then update.
        if (Math.abs(viewWidth - this.viewWidth) > notificationThreshold) {
            this.viewWidth = viewWidth;
            //TODO https://github.com/phetsims/bamboo/issues/21 support Orientation.VERTICAL
            // Create double-headed arrow with perpendicular lines at ends to show modelDelta
            const createBar = (centerX) => new Line(0, 0, 0, this.outerLineLength, { stroke: this.color, centerX: centerX });
            const leftBar = createBar(0);
            const rightBar = createBar(viewWidth);
            const arrowNode = new ArrowNode(leftBar.right, leftBar.centerY, rightBar.left, rightBar.centerY, this.arrowNodeOptions);
            const arrowWithBars = new Node({
                children: [leftBar, rightBar, arrowNode]
            });
            //TODO https://github.com/phetsims/bamboo/issues/21 support Orientation.VERTICAL
            // Prevent labelNode from being wider than arrowWithBars
            this.labelNode.maxWidth = arrowWithBars.width;
            this.children = [arrowWithBars, this.labelNode];
        }
    }
    dispose() {
        this.disposeSpanNode();
        super.dispose();
    }
}
bamboo.register('SpanNode', SpanNode);
export default SpanNode;
//# sourceMappingURL=SpanNode.js.map