import '../../../globals.js';
// Copyright 2022-2024, University of Colorado Boulder
/**
 * A single tab of the PreferencesDialog. Selecting this PreferencesTab makes its associated PreferencesPanel
 * visible in the dialog.
 *
 * @author Jesse Greenberg
 */
import Multilink from '../../../axon/js/Multilink.js';
import PatternStringProperty from '../../../axon/js/PatternStringProperty.js';
import optionize from '../../../phet-core/js/optionize.js';
import { HBox, HighlightPath, Line, Node, PressListener, Rectangle, Text, Voicing } from '../../../scenery/js/imports.js';
import Tandem from '../../../tandem/js/Tandem.js';
import joist from '../joist.js';
import JoistStrings from '../JoistStrings.js';
import PreferencesDialog from './PreferencesDialog.js';
class PreferencesTab extends Voicing(Node) {
    /**
     * @param labelProperty - text label for the tab
     * @param property
     * @param value - PreferencesType shown when this tab is selected
     * @param providedOptions
     */
    constructor(labelProperty, property, value, providedOptions) {
        const options = optionize()({
            iconNode: null,
            pointerAreaXDilation: 0,
            phetioFeatured: true,
            visiblePropertyOptions: {
                phetioFeatured: true
            },
            cursor: 'pointer',
            // pdom
            tagName: 'button',
            innerContent: labelProperty,
            ariaRole: 'tab',
            focusable: true,
            containerTagName: 'li',
            containerAriaRole: 'presentation'
        }, providedOptions);
        // Visual contents for the tab, label Text and optional icon Node
        const text = new Text(labelProperty, PreferencesDialog.TAB_OPTIONS);
        const tabContents = [text];
        if (options.iconNode) {
            tabContents.push(options.iconNode);
        }
        const contentsBox = new HBox({
            children: tabContents,
            spacing: 8
        });
        // background Node behind the tab contents for layout spacing and to increase the clickable area of the tab
        const backgroundNode = new Rectangle({
            children: [contentsBox]
        });
        // Pink underline Node to indicate which tab is selected
        const underlineNode = new Line(0, 0, 0, 0, {
            stroke: HighlightPath.INNER_FOCUS_COLOR,
            lineWidth: 5
        });
        super(options);
        this.children = [backgroundNode, underlineNode];
        contentsBox.boundsProperty.link(bounds => {
            // margin around the tabContents
            backgroundNode.rectBounds = bounds.dilatedXY(15, 10);
            underlineNode.x2 = bounds.width;
            // spacing between the underline and the tabContents
            underlineNode.centerTop = bounds.centerBottom.plusXY(0, 5);
            this.mouseArea = this.localBounds.dilatedX(options.pointerAreaXDilation);
            this.touchArea = this.mouseArea;
        });
        this.value = value;
        const voicingPatternStringProperty = new PatternStringProperty(JoistStrings.a11y.preferences.tabs.tabResponsePatternStringProperty, {
            title: labelProperty
        }, { tandem: Tandem.OPT_OUT });
        this.voicingNameResponse = voicingPatternStringProperty;
        const pressListener = new PressListener({
            press: () => {
                property.set(value);
                // speak the object response on activation
                this.voicingSpeakNameResponse();
            },
            // phet-io
            tandem: Tandem.OPT_OUT // We don't want to instrument components for preferences, https://github.com/phetsims/joist/issues/744#issuecomment-1196028362
        });
        this.addInputListener(pressListener);
        Multilink.multilink([property, pressListener.isOverProperty], (selectedTab, isOver) => {
            backgroundNode.opacity = selectedTab === value ? 1 :
                isOver ? 0.8 :
                    0.6;
            this.focusable = selectedTab === value;
            underlineNode.visible = selectedTab === value;
        });
    }
}
joist.register('PreferencesTab', PreferencesTab);
export default PreferencesTab;
//# sourceMappingURL=PreferencesTab.js.map