import $ from 'jquery';
import MockAdapter from 'axios-mock-adapter';
import '~/commons/bootstrap';
import axios from '~/lib/utils/axios_utils';
import Sidebar from '~/right_sidebar';

let $aside = null;
let $toggle = null;
let $toggleContainer = null;
let $expandIcon = null;
let $collapseIcon = null;
let $page = null;
let $labelsIcon = null;

const assertSidebarState = (state) => {
  const shouldBeExpanded = state === 'expanded';
  const shouldBeCollapsed = state === 'collapsed';
  expect($aside.hasClass('right-sidebar-expanded')).toBe(shouldBeExpanded);
  expect($page.hasClass('right-sidebar-expanded')).toBe(shouldBeExpanded);
  expect($toggleContainer.data('is-expanded')).toBe(shouldBeExpanded);
  expect($expandIcon.hasClass('hidden')).toBe(shouldBeExpanded);
  expect($aside.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed);
  expect($page.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed);
  expect($collapseIcon.hasClass('hidden')).toBe(shouldBeCollapsed);
};

describe('RightSidebar', () => {
  describe('fixture tests', () => {
    const fixtureName = 'issues/open-issue.html';
    preloadFixtures(fixtureName);
    let mock;

    beforeEach(() => {
      loadFixtures(fixtureName);
      mock = new MockAdapter(axios);
      new Sidebar(); // eslint-disable-line no-new
      $aside = $('.right-sidebar');
      $page = $('.layout-page');
      $toggleContainer = $('.js-sidebar-toggle-container');
      $expandIcon = $aside.find('.js-sidebar-expand');
      $collapseIcon = $aside.find('.js-sidebar-collapse');
      $toggle = $aside.find('.js-sidebar-toggle');
      $labelsIcon = $aside.find('.sidebar-collapsed-icon');
    });

    afterEach(() => {
      mock.restore();
    });

    it('should expand/collapse the sidebar when arrow is clicked', () => {
      assertSidebarState('expanded');
      $toggle.click();
      assertSidebarState('collapsed');
      $toggle.click();
      assertSidebarState('expanded');
    });

    it('should float over the page and when sidebar icons clicked', () => {
      $labelsIcon.click();
      assertSidebarState('expanded');
    });

    it('should collapse when the icon arrow clicked while it is floating on page', () => {
      $labelsIcon.click();
      assertSidebarState('expanded');
      $toggle.click();
      assertSidebarState('collapsed');
    });

    it('should broadcast todo:toggle event when add todo clicked', (done) => {
      const todos = getJSONFixture('todos/todos.json');
      mock.onPost(/(.*)\/todos$/).reply(200, todos);

      const todoToggleSpy = jest.fn();
      $(document).on('todo:toggle', todoToggleSpy);

      $('.issuable-sidebar-header .js-issuable-todo').click();

      setImmediate(() => {
        expect(todoToggleSpy.mock.calls.length).toEqual(1);

        done();
      });
    });

    it('should not hide collapsed icons', () => {
      [].forEach.call(document.querySelectorAll('.sidebar-collapsed-icon'), (el) => {
        expect(el.querySelector('.fa, svg').classList.contains('hidden')).toBeFalsy();
      });
    });
  });
});