import CreateItemDropdown from '~/create_item_dropdown';

const DROPDOWN_ITEM_DATA = [{
  title: 'one',
  id: 'one',
  text: 'one',
}, {
  title: 'two',
  id: 'two',
  text: 'two',
}, {
  title: 'three',
  id: 'three',
  text: 'three',
}];

describe('CreateItemDropdown', () => {
  preloadFixtures('static/create_item_dropdown.html.raw');

  let $wrapperEl;

  beforeEach(() => {
    loadFixtures('static/create_item_dropdown.html.raw');
    $wrapperEl = $('.js-create-item-dropdown-fixture-root');

    // eslint-disable-next-line no-new
    new CreateItemDropdown({
      $dropdown: $wrapperEl.find('.js-dropdown-menu-toggle'),
      defaultToggleLabel: 'All variables',
      fieldName: 'variable[environment]',
      getData: (term, callback) => {
        callback(DROPDOWN_ITEM_DATA);
      },
    });
  });

  afterEach(() => {
    $wrapperEl.remove();
  });

  it('should have a dropdown item for each piece of data', () => {
    // Get the data in the dropdown
    $('.js-dropdown-menu-toggle').click();

    const $itemEls = $wrapperEl.find('.js-dropdown-content a');
    expect($itemEls.length).toEqual(DROPDOWN_ITEM_DATA.length);
  });

  describe('created items', () => {
    const NEW_ITEM_TEXT = 'foobarbaz';

    function createItemAndClearInput(text) {
      // Filter for the new item
      $wrapperEl.find('.dropdown-input-field')
        .val(text)
        .trigger('input');

      // Create the new item
      const $createButton = $wrapperEl.find('.js-dropdown-create-new-item');
      $createButton.click();

      // Clear out the filter
      $wrapperEl.find('.dropdown-input-field')
        .val('')
        .trigger('input');
    }

    beforeEach(() => {
      // Open the dropdown
      $('.js-dropdown-menu-toggle').click();

      // Filter for the new item
      $wrapperEl.find('.dropdown-input-field')
        .val(NEW_ITEM_TEXT)
        .trigger('input');
    });

    it('create new item button should include the filter text', () => {
      expect($wrapperEl.find('.js-dropdown-create-new-item code').text()).toEqual(NEW_ITEM_TEXT);
    });

    it('should update the dropdown with the newly created item', () => {
      // Create the new item
      const $createButton = $wrapperEl.find('.js-dropdown-create-new-item');
      $createButton.click();

      expect($wrapperEl.find('.dropdown-toggle-text').text()).toEqual(NEW_ITEM_TEXT);
      expect($wrapperEl.find('input[name="variable[environment]"]').val()).toEqual(NEW_ITEM_TEXT);
    });

    it('should include newly created item in dropdown list', () => {
      createItemAndClearInput(NEW_ITEM_TEXT);

      const $itemEls = $wrapperEl.find('.js-dropdown-content a');
      expect($itemEls.length).toEqual(1 + DROPDOWN_ITEM_DATA.length);
      expect($($itemEls.get(DROPDOWN_ITEM_DATA.length)).text()).toEqual(NEW_ITEM_TEXT);
    });

    it('should not duplicate an item when trying to create an existing item', () => {
      createItemAndClearInput(DROPDOWN_ITEM_DATA[0].text);

      const $itemEls = $wrapperEl.find('.js-dropdown-content a');
      expect($itemEls.length).toEqual(DROPDOWN_ITEM_DATA.length);
    });
  });
});