import Vue from 'vue';
import participants from '~/sidebar/components/participants/participants.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';

const PARTICIPANT = {
  id: 1,
  state: 'active',
  username: 'marcene',
  name: 'Allie Will',
  web_url: 'foo.com',
  avatar_url: 'gravatar.com/avatar/xxx',
};

const PARTICIPANT_LIST = [
  PARTICIPANT,
  { ...PARTICIPANT, id: 2 },
  { ...PARTICIPANT, id: 3 },
];

describe('Participants', function () {
  let vm;
  let Participants;

  beforeEach(() => {
    Participants = Vue.extend(participants);
  });

  afterEach(() => {
    vm.$destroy();
  });

  describe('collapsed sidebar state', () => {
    it('shows loading spinner when loading', () => {
      vm = mountComponent(Participants, {
        loading: true,
      });

      expect(vm.$el.querySelector('.js-participants-collapsed-loading-icon')).toBeDefined();
    });

    it('shows participant count when given', () => {
      vm = mountComponent(Participants, {
        loading: false,
        participants: PARTICIPANT_LIST,
      });
      const countEl = vm.$el.querySelector('.js-participants-collapsed-count');

      expect(countEl.textContent.trim()).toBe(`${PARTICIPANT_LIST.length}`);
    });

    it('shows full participant count when there are hidden participants', () => {
      vm = mountComponent(Participants, {
        loading: false,
        participants: PARTICIPANT_LIST,
        numberOfLessParticipants: 1,
      });
      const countEl = vm.$el.querySelector('.js-participants-collapsed-count');

      expect(countEl.textContent.trim()).toBe(`${PARTICIPANT_LIST.length}`);
    });
  });

  describe('expanded sidebar state', () => {
    it('shows loading spinner when loading', () => {
      vm = mountComponent(Participants, {
        loading: true,
      });

      expect(vm.$el.querySelector('.js-participants-expanded-loading-icon')).toBeDefined();
    });

    it('when only showing visible participants, shows an avatar only for each participant under the limit', (done) => {
      const numberOfLessParticipants = 2;
      vm = mountComponent(Participants, {
        loading: false,
        participants: PARTICIPANT_LIST,
        numberOfLessParticipants,
      });
      vm.isShowingMoreParticipants = false;

      Vue.nextTick()
        .then(() => {
          const participantEls = vm.$el.querySelectorAll('.js-participants-author');

          expect(participantEls.length).toBe(numberOfLessParticipants);
        })
        .then(done)
        .catch(done.fail);
    });

    it('when only showing all participants, each has an avatar', (done) => {
      const numberOfLessParticipants = 2;
      vm = mountComponent(Participants, {
        loading: false,
        participants: PARTICIPANT_LIST,
        numberOfLessParticipants,
      });
      vm.isShowingMoreParticipants = true;

      Vue.nextTick()
        .then(() => {
          const participantEls = vm.$el.querySelectorAll('.js-participants-author');

          expect(participantEls.length).toBe(PARTICIPANT_LIST.length);
        })
        .then(done)
        .catch(done.fail);
    });

    it('does not have more participants link when they can all be shown', () => {
      const numberOfLessParticipants = 100;
      vm = mountComponent(Participants, {
        loading: false,
        participants: PARTICIPANT_LIST,
        numberOfLessParticipants,
      });
      const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button');

      expect(PARTICIPANT_LIST.length).toBeLessThan(numberOfLessParticipants);
      expect(moreParticipantLink).toBeNull();
    });

    it('when too many participants, has more participants link to show more', (done) => {
      vm = mountComponent(Participants, {
        loading: false,
        participants: PARTICIPANT_LIST,
        numberOfLessParticipants: 2,
      });
      vm.isShowingMoreParticipants = false;

      Vue.nextTick()
        .then(() => {
          const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button');

          expect(moreParticipantLink.textContent.trim()).toBe('+ 1 more');
        })
        .then(done)
        .catch(done.fail);
    });

    it('when too many participants and already showing them, has more participants link to show less', (done) => {
      vm = mountComponent(Participants, {
        loading: false,
        participants: PARTICIPANT_LIST,
        numberOfLessParticipants: 2,
      });
      vm.isShowingMoreParticipants = true;

      Vue.nextTick()
        .then(() => {
          const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button');

          expect(moreParticipantLink.textContent.trim()).toBe('- show less');
        })
        .then(done)
        .catch(done.fail);
    });

    it('clicking more participants link emits event', () => {
      vm = mountComponent(Participants, {
        loading: false,
        participants: PARTICIPANT_LIST,
        numberOfLessParticipants: 2,
      });
      const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button');

      expect(vm.isShowingMoreParticipants).toBe(false);

      moreParticipantLink.click();

      expect(vm.isShowingMoreParticipants).toBe(true);
    });

    it('clicking on participants icon emits `toggleSidebar` event', () => {
      vm = mountComponent(Participants, {
        loading: false,
        participants: PARTICIPANT_LIST,
        numberOfLessParticipants: 2,
      });
      spyOn(vm, '$emit');

      const participantsIconEl = vm.$el.querySelector('.sidebar-collapsed-icon');

      participantsIconEl.click();

      expect(vm.$emit).toHaveBeenCalledWith('toggleSidebar');
    });
  });
});