import React from 'react';
import Cropper from 'react-easy-crop';
import { shallow } from 'enzyme';

import ImageCropper from '../../ImageUpload/ImageCropper';

describe('ImageCropper', () => {
  let component;
  let imageSrc;
  let type;
  let onSaveCroppedImage;
  let onCancelCroppedImage;
  let aspect;
  let buttonCancelText;
  let buttonApplyText;

  beforeEach(() => {
    imageSrc = 'imageSrc';
    type = 'logo';
    onSaveCroppedImage = jest.fn();
    onCancelCroppedImage = jest.fn();
    aspect = 3 / 1;
    buttonCancelText = 'Cancel';
    buttonApplyText = 'Apply';

    component = shallow(
      <ImageCropper
        imageSrc={imageSrc}
        type={type}
        aspect={aspect}
        onSaveCroppedImage={onSaveCroppedImage}
        onCancelCroppedImage={onCancelCroppedImage}
        buttonCancelText={buttonCancelText}
        buttonApplyText={buttonApplyText}
      />
    );
  });

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

  it('should call onSaveCroppedImage with croppedAreaPixels when Apply button is clicked', () => {
    const croppedAreaPixels = 0;
    component.find('.ImageCropper-Button--Apply').simulate('click');
    expect(onSaveCroppedImage).toHaveBeenCalledWith(croppedAreaPixels);
  });

  it('should call onCancelCroppedImage when Cancel button is clicked', () => {
    component.find('.ImageCropper-Button--Cancel').simulate('click');
    expect(onCancelCroppedImage).toHaveBeenCalled();
  });

  it('should have image prop as imageSrc', () => {
    expect(component.find(Cropper).prop('image')).toBe(imageSrc);
  });

  it('minZoom and maxZoom props should match input range', () => {
    const cropperMinZoom = component.find(Cropper).prop('minZoom');
    const cropperMaxZoom = component.find(Cropper).prop('maxZoom');

    expect(component.find('.ImageCropper-Range').prop('min')).toBe(cropperMinZoom);
    expect(component.find('.ImageCropper-Range').prop('max')).toBe(cropperMaxZoom);
  });

  it('sets new crop state when onCropChange called', () => {
    const crop = { x: 0, y: 0 };
    const setStateSpy = jest.spyOn(component.instance(), 'setState');
    component.instance().onCropChange(crop);
    expect(setStateSpy).toHaveBeenCalledWith({ crop });
  });

  it('sets new croppedAreaPixels state when onCropComplete is called', () => {
    const croppedAreaPixels = 5;
    const croppedArea = { x: 0, y: 0 };
    const setStateSpy = jest.spyOn(component.instance(), 'setState');
    component.instance().onCropComplete(croppedArea, croppedAreaPixels);
    expect(setStateSpy).toHaveBeenCalledWith({ croppedAreaPixels });
  });

  it('sets new zoom state when onZoomChange is called', () => {
    const zoom = 1;
    const setStateSpy = jest.spyOn(component.instance(), 'setState');
    component.instance().onZoomChange(zoom);
    expect(setStateSpy).toHaveBeenCalledWith({ zoom });
  });
});