import React from 'react';
import { mount } from 'enzyme';

import TutorialReview from '.';
import { Button, EmojiPicker } from '@ui/components';
import TutorialReferencePicker from '../TutorialReferencePicker';

describe('TutorialReview', () => {
  let node;
  let props;

  beforeEach(() => {
    props = {
      updateTutorial: jest.fn(),
      tutorial: {
        backgroundColor: '#018FF4',
        emoji: '🦉',
        response: '{"success":true}',
        referenceDisplay: ['123'],
        steps: [],
        snippet: {},
        title: 'Tutorial Title',
        description: 'Tutorial Description',
      },
      endpoints: [
        {
          categoryId: '1',
          title: 'Petstore',
          children: [
            {
              _id: '123',
              api: {
                apiSetting: '222',
                method: 'get',
              },
              title: 'Get Pets',
            },
          ],
        },
      ],
    };

    node = mount(<TutorialReview {...props} />);
  });

  it('should display TutorialReview', () => {
    expect(node.find('.TutorialReview')).toHaveLength(1);
  });

  it('should show with minimal data', () => {
    const p2 = {
      updateTutorial: jest.fn(),
      tutorial: {
        response: '',
        referenceDisplay: [],
        steps: [],
        snippet: {},
        title: 'Tutorial Title',
        description: 'Tutorial Description',
      },
      endpoints: [],
    };

    const n2 = mount(<TutorialReview {...p2} />);

    expect(n2.find('.TutorialReview-Fieldset-Avatar_empty')).toHaveLength(2);
  });

  describe('Actions', () => {
    it('should set emoji via picker', () => {
      const pickerButton = node.find(EmojiPicker).find('button').at(4);
      pickerButton.simulate('click', { target: { value: '😁' } });

      setTimeout(() => {
        expect(props.tutorial.emoji).toStrictEqual('😁');
      });
    });

    it('should clear tutorial referenceDisplay field on `Clear All`', () => {
      const button = node.find('fieldset').at(1).find(Button).first();
      button.simulate('click');
      setTimeout(() => {
        expect(props.tutorial.referenceDisplay).toHaveLength(0);
      });
    });

    it('should add referenceDisplay selection if not in array', () => {
      const picker = node.find(TutorialReferencePicker);
      picker.prop('setReferenceSelection')('12');

      expect(props.updateTutorial).toHaveBeenCalledWith({ referenceDisplay: ['123', '12'] });
    });

    it('should remove referenceDisplay selection if in array', () => {
      const picker = node.find(TutorialReferencePicker);
      picker.prop('setReferenceSelection')('123');

      expect(props.updateTutorial).toHaveBeenCalledWith({ referenceDisplay: [] });
    });
  });
});
