/**
 * @jest-environment jsdom
 */
import React from 'react';

import theme from '../../themes/hero';

import { fireEvent, render, waitFor } from '@testing-library/react-native';

import RichTextEditor__Toolbar from '../RichTextEditor/Toolbar';
import * as Events from '../../bindings/Events';
import * as RichTextEditor__Event from '../RichTextEditor/Event';

jest.mock('../heroEditorApp');
describe('RichTextEditor__Toolbar', () => {
  describe('when text editor is not focused', () => {
    it('should not render toolbar', () => {
      const wrapper = render(<RichTextEditor__Toolbar name="toolbar" buttons={['bold']} />);

      expect(wrapper.toJSON()).toBeNull();
    });
  });

  describe('when text editor is focused', () => {
    let wrapper = null;
    beforeEach(async () => {
      wrapper = render(<RichTextEditor__Toolbar name="toolbar" testID="toolbar" />);
      RichTextEditor__Event.emitter.emit('toolbar/editor-focus');
      await waitFor(() => wrapper.getByTestId('toolbar'));
    });

    it('should render toolbar', async () => {
      expect(wrapper.toJSON()).toMatchSnapshot();

      [
        'format_bold',
        'format_italic',
        'format_underlined',
        'format_list_bulleted',
        'format_list_numbered',
        'looks_one',
        'looks_two',
      ].forEach(testId => {
        expect(wrapper.queryAllByTestId(testId)).toHaveLength(1);
      });
    });

    describe('when blur', () => {
      it('should hide toolbar', async () => {
        RichTextEditor__Event.emitter.emit('toolbar/editor-blur');
        await waitFor(() => wrapper.queryAllByTestId('toolbar').length == 0);
        expect(wrapper.queryAllByTestId('toolbar')).toHaveLength(0);
      });
    });

    describe('onPress bar button', () => {
      it('should send event and highlight bar button', () => {
        const eventsEmmited = [];

        const eventNameAndTestIDArray = [
          {
            eventName: 'toolbar/bold',
            testID: 'format_bold',
          },
          {
            eventName: 'toolbar/italic',
            testID: 'format_italic',
          },
          {
            eventName: 'toolbar/underline',
            testID: 'format_underlined',
          },
          {
            eventName: 'toolbar/bulleted-list',
            testID: 'format_list_bulleted',
          },
          {
            eventName: 'toolbar/numbered-list',
            testID: 'format_list_numbered',
          },
          {
            eventName: 'toolbar/heading-one',
            testID: 'looks_one',
          },
          {
            eventName: 'toolbar/heading-two',
            testID: 'looks_two',
          },
        ];
        eventNameAndTestIDArray.forEach(({ eventName, testID }) => {
          Events.on(RichTextEditor__Event.emitter, eventName, () => {
            eventsEmmited.push(testID);
          });

          expect(wrapper.getByTestId(testID)).toHaveStyle(theme.richTextEditor.toolbarButton);

          fireEvent(wrapper.getByTestId(testID), 'press');
          expect(wrapper.getByTestId(testID)).toHaveStyle(theme.richTextEditor.selectedToolbarButton);
        });

        expect(eventsEmmited).toMatchObject([
          'format_bold',
          'format_italic',
          'format_underlined',
          'format_list_bulleted',
          'format_list_numbered',
          'looks_one',
          'looks_two',
        ]);
      });
    });
  });
});