import React from 'react';
import { mount, shallow } from 'enzyme';
import Modal from '../../../../structure/Modal';
import ImageUpload from '../../ImageUpload/ImageUpload';
import ImageCropper from '../../ImageUpload/ImageCropper';
import { aspectRatio } from '../../ImageUpload/config';

describe('ImageUpload', () => {
  let component;
  let mountedComponent;
  let buttonLabel;
  let name;
  let onChange;
  let isLoading;
  let imageType;
  let buttonCancelText;
  let buttonApplyText;

  beforeAll(() => {
    buttonLabel = 'Upload';
    name = 'Image upload';
    onChange = jest.fn();
    isLoading = false;
    imageType = 'logo';
    buttonCancelText = 'Cancel';
    buttonApplyText = 'Apply';
  });

  beforeEach(() => {
    component = shallow(
      <ImageUpload
        buttonLabel={buttonLabel}
        name={name}
        onChange={onChange}
        isLoading={isLoading}
        imageType={imageType}
        buttonCancelText={buttonCancelText}
        buttonApplyText={buttonApplyText}
      />
    );
    mountedComponent = mount(
      <ImageUpload
        buttonLabel={buttonLabel}
        name={name}
        onChange={onChange}
        isLoading={isLoading}
        imageType={imageType}
        buttonCancelText={buttonCancelText}
        buttonApplyText={buttonApplyText}
      />
    );
  });

  it('should match a snapshot', () => {
    expect(component.getElement()).toMatchSnapshot();
  });

  it('should click on input when upload button is clicked', () => {
    const clickSpy = jest.spyOn(HTMLInputElement.prototype, 'click');
    mountedComponent
      .find('.ImageUpload-uploadButton')
      .first()
      .simulate('click');
    expect(clickSpy).toHaveBeenCalled();
    clickSpy.mockRestore();
  });

  describe('when imageSrc state is provided', () => {
    beforeEach(() => {
      component.setState({ imageSrc: 'image-src' });
    });

    it('should match snapshot', () => {
      expect(component.getElement()).toMatchSnapshot();
    });

    it('should show modal', () => {
      expect(component.find(Modal).prop('show')).toBe(true);
    });

    it('pass imageSrc down as imageSrc prop to ImageCropper', () => {
      expect(component.find(ImageCropper).prop('imageSrc')).toBe('image-src');
    });

    it('should hide modal and reset state when cancel button is clicked', () => {
      const setStateSpy = jest.spyOn(component.instance(), 'setState');
      component.instance().handleCancelUploadFile();
      expect(setStateSpy).toHaveBeenCalledWith({ imageSrc: '', fileType: '' });
      expect(component.find(Modal).prop('show')).toBe(false);
    });

    it('should set correct aspect ratio for logo', () => {
      expect(component.find(ImageCropper).prop('aspect')).toBe(aspectRatio.logo);
    });

    it('should set correct aspect ratio for background', () => {
      component.setProps({ imageType: 'background' });
      expect(component.find(ImageCropper).prop('aspect')).toBe(aspectRatio.background);
    });
  });

  describe('handleCancelUploadFile', () => {
    it('should reset all state', () => {
      const setStateSpy = jest.spyOn(component.instance(), 'setState');
      component.instance().handleCancelUploadFile();
      expect(setStateSpy).toHaveBeenCalledWith({ imageSrc: '', fileType: '' });
    });
  });

  describe('handleChangeFile', () => {
    it('should reset all state', () => {
      const setStateSpy = jest.spyOn(component.instance(), 'setState');
      component.instance().handleChangeFile();
      expect(setStateSpy).toHaveBeenCalledWith({ imageSrc: '', fileType: '' });
    });
  });
});