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 previewIcon;
  let imageUrl;
  let buttonLabel;
  let name;
  let onChange;
  let isLoading;
  let imageType;
  let buttonCancelText;
  let buttonApplyText;

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

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

  describe('when imageUrl is not provided', () => {
    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();
    });

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

  describe('when imageUrl is provided', () => {
    beforeEach(() => {
      component.setProps({ imageUrl: 'some-fake-url' });
    });

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

    it('should call onChange on delete with no arguments', () => {
      component.find('.ImageUpload-deleteIcon').simulate('click', { preventDefault: () => {} });
      expect(onChange).toHaveBeenCalledWith();
    });

    it('should disable upload and delete buttons when isLoading is true', () => {
      component.setProps({ isLoading: true });
      expect(component.find('.ImageUpload-uploadButton').prop('disabled')).toBe(true);
      expect(component.find('.ImageUpload-deleteIcon').prop('disabled')).toBe(true);
    });
  });

  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 call onChange when apply button is clicked', async () => {
      component.instance().handleSaveCroppedImage();
      await expect(onChange).toHaveBeenCalled();
    });

    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: '', fileName: '' });
      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('handleChange', () => {
    it('should call checkFileSize if there is a file', () => {
      const fakeFile = 'fake-file';
      const event = { target: { files: [fakeFile] } };
      component.instance().checkFileSize = jest.fn();
      component.find('.ImageUpload-input').simulate('change', event);
      expect(component.instance().checkFileSize).toHaveBeenCalled();
    });
  });

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

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