import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */

/// <reference types="cypress" />
/// <reference types="cypress-real-events" />
/// <reference types="../../../cypress/support" />

import React, { useState } from 'react';
import { EuiComboBox } from './index';
import { jsx as ___EmotionJSX } from "@emotion/react";
var ComboBox = function ComboBox(_ref) {
  var initialOptions = _ref.initialOptions,
    rowHeight = _ref.rowHeight;
  var _useState = useState(initialOptions !== null && initialOptions !== void 0 ? initialOptions : [{
      label: 'Titan',
      'data-test-subj': 'titanOption'
    }, {
      label: 'Enceladus',
      'data-test-subj': 'enceladusOption'
    }, {
      label: 'Mimas',
      'data-test-subj': 'mimasOption'
    }, {
      label: 'Dione',
      'data-test-subj': 'dioneOption'
    }, {
      label: 'Iapetus',
      'data-test-subj': 'iapetusOption'
    }, {
      label: 'Phoebe',
      'data-test-subj': 'phoebeOption'
    }, {
      label: 'Rhea',
      'data-test-subj': 'rheaOption'
    }, {
      label: 'Tethys',
      'data-test-subj': 'tethysOption'
    }, {
      label: 'Hyperion',
      'data-test-subj': 'hyperionOption'
    }]),
    _useState2 = _slicedToArray(_useState, 1),
    options = _useState2[0];
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    selectedOptions = _useState4[0],
    setSelected = _useState4[1];
  var onChange = function onChange(selectedOptions) {
    setSelected(selectedOptions);
  };
  return ___EmotionJSX(EuiComboBox, {
    "aria-label": "Accessible screen reader label",
    placeholder: "Select options",
    options: options,
    selectedOptions: selectedOptions,
    onChange: onChange,
    isClearable: true,
    isCaseSensitive: true,
    rowHeight: rowHeight
  });
};
afterEach(function () {
  cy.get('input[data-test-subj="comboBoxSearchInput"]').should('exist');
});
describe('EuiComboBox', function () {
  [undefined, 'auto'].forEach(function (rowHeight) {
    describe("Automated accessibility check with rowHeight ".concat(rowHeight !== null && rowHeight !== void 0 ? rowHeight : 'default'), function () {
      it('has zero violations on render', function () {
        cy.realMount(___EmotionJSX(ComboBox, {
          rowHeight: rowHeight
        }));
        cy.checkAxe();
      });
      it('has zero violations when the combobox is expanded', function () {
        cy.realMount(___EmotionJSX(ComboBox, {
          rowHeight: rowHeight
        }));
        cy.get('input[data-test-subj="comboBoxSearchInput"]').realClick();
        cy.get('[data-test-subj="titanOption"]').should('exist');
        cy.checkAxe();
      });
      it('has zero violations after keyboard interaction', function () {
        cy.realMount(___EmotionJSX(ComboBox, {
          rowHeight: rowHeight
        }));
        cy.realPress('Tab');
        cy.get('input[data-test-subj="comboBoxSearchInput"]').should('have.focus');
        cy.get('[data-test-subj="titanOption"]').should('exist');
        cy.repeatRealPress('ArrowDown');
        cy.realPress('Enter');
        cy.repeatRealPress('ArrowDown');
        cy.realPress('Enter');
        cy.repeatRealPress('ArrowDown');
        cy.realPress('Enter');
        cy.get('div[data-test-subj="comboBoxInput"]').find('span.euiBadge').should('have.length', 3);
        cy.checkAxe();

        // Close the listbox and interact with the Clear button
        cy.realPress('Escape');
        cy.realPress('Tab');
        cy.get('button[data-test-subj="comboBoxClearButton"]').should('have.focus');
        cy.realPress('Space');
        cy.get('div[data-test-subj="comboBoxInput"]').find('span.euiBadge').should('have.length', 0);
        cy.checkAxe();
      });
    });
    describe("Manual Accessibility check with rowHeight ".concat(rowHeight !== null && rowHeight !== void 0 ? rowHeight : 'default'), function () {
      it('sets the correct aria-activedescendant id', function () {
        cy.realMount(___EmotionJSX(ComboBox, {
          rowHeight: rowHeight
        }));
        cy.realPress('Tab');
        cy.get('input[data-test-subj="comboBoxSearchInput"]').should('have.focus');
        cy.get('[data-test-subj="titanOption"]').should('exist');
        cy.realPress('ArrowDown');
        cy.realPress('ArrowDown');
        cy.realPress('ArrowDown');
        cy.get('input[data-test-subj="comboBoxSearchInput"]').invoke('attr', 'aria-activedescendant').should('include', 'option-2');
        cy.realPress('Enter');
        cy.realPress('ArrowDown');
        cy.get('input[data-test-subj="comboBoxSearchInput"]').invoke('attr', 'aria-activedescendant').should('include', 'option-4');
      });
      it('sets the correct aria-activedescendant id with custom option ids', function () {
        cy.realMount(___EmotionJSX(ComboBox, {
          rowHeight: rowHeight,
          initialOptions: [{
            id: 'titan',
            label: 'Titan',
            'data-test-subj': 'titanOption'
          }, {
            id: 'enceladus',
            label: 'Enceladus',
            'data-test-subj': 'enceladusOption'
          }, {
            id: 'mimas',
            label: 'Mimas',
            'data-test-subj': 'mimasOption'
          }, {
            id: 'dione',
            label: 'Dione',
            'data-test-subj': 'dioneOption'
          }, {
            id: 'iapetus',
            label: 'Iapetus',
            'data-test-subj': 'iapetusOption'
          }]
        }));
        cy.get('input[data-test-subj="comboBoxSearchInput"]').should('exist');
        cy.realPress('Tab');
        cy.get('input[data-test-subj="comboBoxSearchInput"]').should('have.focus');
        cy.get('[data-test-subj="titanOption"]').should('exist');
        cy.realPress('ArrowDown');
        cy.realPress('ArrowDown');
        cy.realPress('ArrowDown');
        cy.get('input[data-test-subj="comboBoxSearchInput"]').should('have.attr', 'aria-activedescendant', 'mimas');
        cy.realPress('Enter');
        cy.realPress('ArrowDown');
        cy.get('input[data-test-subj="comboBoxSearchInput"]').should('have.attr', 'aria-activedescendant', 'iapetus');
      });
    });
  });
});