/* *
 *
 *  (c) 2009-2019 Øystein Moseng
 *
 *  Accessibility component for the range selector.
 *
 *  License: www.highcharts.com/license
 *
 * */

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _Globals = require('../../../parts/Globals.js');

var _Globals2 = _interopRequireDefault(_Globals);

var _AccessibilityComponent = require('../AccessibilityComponent.js');

var _AccessibilityComponent2 = _interopRequireDefault(_AccessibilityComponent);

var _KeyboardNavigationHandler = require('../KeyboardNavigationHandler.js');

var _KeyboardNavigationHandler2 = _interopRequireDefault(_KeyboardNavigationHandler);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * Highlight range selector button by index.
 *
 * @private
 * @function Highcharts.Chart#highlightRangeSelectorButton
 *
 * @param {number} ix
 *
 * @return {boolean}
 */
_Globals2.default.Chart.prototype.highlightRangeSelectorButton = function (ix) {
    var buttons = this.rangeSelector.buttons;

    // Deselect old
    if (buttons[this.highlightedRangeSelectorItemIx]) {
        buttons[this.highlightedRangeSelectorItemIx].setState(this.oldRangeSelectorItemState || 0);
    }
    // Select new
    this.highlightedRangeSelectorItemIx = ix;
    if (buttons[ix]) {
        this.setFocusToElement(buttons[ix].box, buttons[ix].element);
        this.oldRangeSelectorItemState = buttons[ix].state;
        buttons[ix].setState(2);
        return true;
    }
    return false;
};

/**
 * The RangeSelectorComponent class
 *
 * @private
 * @class
 * @name Highcharts.RangeSelectorComponent
 * @param {Highcharts.Chart} chart
 *        Chart object
 */
var RangeSelectorComponent = function RangeSelectorComponent(chart) {
    this.initBase(chart);
};
RangeSelectorComponent.prototype = new _AccessibilityComponent2.default();
_Globals2.default.extend(RangeSelectorComponent.prototype, /** @lends Highcharts.RangeSelectorComponent */{ // eslint-disable-line

    /**
     * Called on first render/updates to the chart, including options changes.
     */
    onChartUpdate: function onChartUpdate() {
        var chart = this.chart,
            component = this,
            rangeSelector = chart.rangeSelector;

        if (!rangeSelector) {
            return;
        }

        // Make sure buttons are accessible and focusable
        if (rangeSelector.buttons && rangeSelector.buttons.length) {
            rangeSelector.buttons.forEach(function (button) {
                component.unhideElementFromScreenReaders(button.element);
                button.element.setAttribute('tabindex', '-1');
                button.element.setAttribute('role', 'button');
                button.element.setAttribute('aria-label', chart.langFormat('accessibility.rangeSelectorButton', {
                    chart: chart,
                    buttonText: button.text && button.text.textStr
                }));
            });
        }

        // Make sure input boxes are accessible and focusable
        if (rangeSelector.maxInput && rangeSelector.minInput) {
            ['minInput', 'maxInput'].forEach(function (key, i) {
                if (rangeSelector[key]) {
                    component.unhideElementFromScreenReaders(rangeSelector[key]);
                    rangeSelector[key].setAttribute('tabindex', '-1');
                    rangeSelector[key].setAttribute('role', 'textbox');
                    rangeSelector[key].setAttribute('aria-label', chart.langFormat('accessibility.rangeSelector' + (i ? 'MaxInput' : 'MinInput'), { chart: chart }));
                }
            });
        }
    },

    /**
     * Get navigation for the range selector buttons.
     * @private
     * @return {Highcharts.KeyboardNavigationHandler} The module object.
     */
    getRangeSelectorButtonNavigation: function getRangeSelectorButtonNavigation() {
        var chart = this.chart,
            keys = this.keyCodes,
            a11yOptions = chart.options.accessibility,
            component = this;

        return new _KeyboardNavigationHandler2.default(chart, {
            keyCodeMap: [
            // Left/Right/Up/Down
            [[keys.left, keys.right, keys.up, keys.down], function (keyCode) {
                var direction = keyCode === keys.left || keyCode === keys.up ? -1 : 1;

                // Try to highlight next/prev button
                if (!chart.highlightRangeSelectorButton(chart.highlightedRangeSelectorItemIx + direction)) {
                    // If we failed, handle wrap around/move
                    if (a11yOptions.keyboardNavigation.wrapAround) {
                        this.init(direction);
                        return this.response.success;
                    }
                    return this.response[direction > 0 ? 'next' : 'prev'];
                }
            }],

            // Enter/Spacebar
            [[keys.enter, keys.space], function () {
                // Don't allow click if button used to be disabled
                if (chart.oldRangeSelectorItemState !== 3) {
                    component.fakeClickEvent(chart.rangeSelector.buttons[chart.highlightedRangeSelectorItemIx].element);
                }
            }]],

            // Only run this module if we have range selector
            validate: function validate() {
                return chart.rangeSelector && chart.rangeSelector.buttons && chart.rangeSelector.buttons.length;
            },

            // Focus first/last button
            init: function init(direction) {
                chart.highlightRangeSelectorButton(direction > 0 ? 0 : chart.rangeSelector.buttons.length - 1);
            }
        });
    },

    /**
     * Get navigation for the range selector input boxes.
     * @private
     * @return {Highcharts.KeyboardNavigationHandler}
     *         The module object.
     */
    getRangeSelectorInputNavigation: function getRangeSelectorInputNavigation() {
        var chart = this.chart,
            keys = this.keyCodes;

        return new _KeyboardNavigationHandler2.default(chart, {
            keyCodeMap: [
            // Tab/Up/Down
            [[keys.tab, keys.up, keys.down], function (keyCode, e) {
                var direction = keyCode === keys.tab && e.shiftKey || keyCode === keys.up ? -1 : 1,
                    newIx = chart.highlightedInputRangeIx = chart.highlightedInputRangeIx + direction;

                // Try to highlight next/prev item in list.
                if (newIx > 1 || newIx < 0) {
                    // Out of range
                    return this.response[direction > 0 ? 'next' : 'prev'];
                }
                chart.rangeSelector[newIx ? 'maxInput' : 'minInput'].focus();
                return this.response.success;
            }]],

            // Only run if we have range selector with input boxes
            validate: function validate() {
                var inputVisible = chart.rangeSelector && chart.rangeSelector.inputGroup && chart.rangeSelector.inputGroup.element.getAttribute('visibility') !== 'hidden';

                return inputVisible && chart.options.rangeSelector.inputEnabled !== false && chart.rangeSelector.minInput && chart.rangeSelector.maxInput;
            },

            // Highlight first/last input box
            init: function init(direction) {
                chart.highlightedInputRangeIx = direction > 0 ? 0 : 1;
                chart.rangeSelector[chart.highlightedInputRangeIx ? 'maxInput' : 'minInput'].focus();
            },

            // Hide HTML element when leaving boxes
            terminate: function terminate() {
                var rangeSel = chart.rangeSelector;
                if (rangeSel && rangeSel.maxInput && rangeSel.minInput) {
                    rangeSel.hideInput('max');
                    rangeSel.hideInput('min');
                }
            }
        });
    },

    /**
     * Get keyboard navigation handlers for this component.
     * @return {Array<Highcharts.KeyboardNavigationHandler>}
     *         List of module objects.
     */
    getKeyboardNavigation: function getKeyboardNavigation() {
        return [this.getRangeSelectorButtonNavigation(), this.getRangeSelectorInputNavigation()];
    }

});

exports.default = RangeSelectorComponent;