import 'reflect-metadata';

import {
    empty,
    of,
} from 'rxjs';

import {
    requiredMocks,
} from './../../../test-mocks';
requiredMocks(jest);

import {
    CanvasImageComponent,
} from './canvas-image.component';

import {
    ImagePreloaderService,
} from './../../helpers/services/index';

const initCanvasImageComponent = (
    imagePreloaderService?: ImagePreloaderService,
) => {
    return new CanvasImageComponent(
        imagePreloaderService,
    );
};

describe('get canvas', () => {
    test('Returns the canvasElement.nativeElement', () => {
        const canvasImageComponent = initCanvasImageComponent();
        canvasImageComponent.canvasElement = {
            nativeElement: {},
        };

        expect(canvasImageComponent.canvas)
            .toBe(canvasImageComponent.canvasElement.nativeElement);
    });
});

describe('get canvasCtx', () => {
    test('Returns the canvas 2d context', () => {
        const canvasImageComponent = initCanvasImageComponent();
        canvasImageComponent.canvasElement = {
            nativeElement: {
                getContext: jest.fn().mockReturnValue('testCanvasContext'),
            },
        };

        expect(canvasImageComponent.canvasCtx).toBe('testCanvasContext');
    });
});

describe('ngOnChanges', () => {
    test('Calls initCanvasSize', () => {
        const canvasImageComponent = initCanvasImageComponent();
        canvasImageComponent.initCanvasSize = jest.fn();
        canvasImageComponent.loadImages = jest.fn();

        canvasImageComponent.ngOnChanges();

        expect(canvasImageComponent.initCanvasSize).toHaveBeenCalled();
    });

    test('Calls loadImages', () => {
        const canvasImageComponent = initCanvasImageComponent();
        canvasImageComponent.initCanvasSize = jest.fn();
        canvasImageComponent.loadImages = jest.fn();

        canvasImageComponent.ngOnChanges();

        expect(canvasImageComponent.loadImages).toHaveBeenCalled();
    });
});

describe('loadImages', () => {
    test('Calls the imagePreloaderService to load the imageUrl', () => {
        const imagePreloaderService = {} as ImagePreloaderService;
        imagePreloaderService.load = jest.fn().mockReturnValue(
            empty(),
        );
        const canvasImageComponent = initCanvasImageComponent(
            imagePreloaderService,
        );
        canvasImageComponent.imageUrl = 'testImageUrl';

        canvasImageComponent.loadImages();

        expect(imagePreloaderService.load).toHaveBeenCalledWith('testImageUrl');
    });

    // tslint:disable-next-line
    test('Once the imagePreloaderService loads call the drawOnCanvas with the correct data', () => {
        const image = {} as HTMLImageElement;
        const imagePreloaderService = {} as ImagePreloaderService;
        imagePreloaderService.load = jest.fn().mockReturnValue(
            of(image),
        );
        const canvasImageComponent = initCanvasImageComponent(
            imagePreloaderService,
        );
        canvasImageComponent.drawOnCanvas = jest.fn();
        canvasImageComponent.canvasElement = {
            nativeElement: {
                getContext: jest.fn().mockReturnValue('canvasCtx'),
                offsetHeight: 15,
                offsetWidth: 10,
            },
        };
        canvasImageComponent.colorOverlay = 'colorOverlay';
        canvasImageComponent.scale = 7;

        canvasImageComponent.loadImages();

        expect(canvasImageComponent.drawOnCanvas).toHaveBeenCalledWith(
            'canvasCtx',
            image,
            10,
            15,
            'colorOverlay',
            7,
        );
    });
});

describe('initCanvasSize', () => {
    test('Sets the canvas height to the canvas offsetHeight', () => {
        const canvasImageComponent = initCanvasImageComponent();
        canvasImageComponent.canvasElement = {
            nativeElement: {
                offsetHeight: 15,
            },
        };

        canvasImageComponent.initCanvasSize();

        expect(canvasImageComponent.canvas.height).toBe(15);
    });

    test('Sets the canvas width to the canvas offsetWidth', () => {
        const canvasImageComponent = initCanvasImageComponent();
        canvasImageComponent.canvasElement = {
            nativeElement: {
                offsetWidth: 15,
            },
        };

        canvasImageComponent.initCanvasSize();

        expect(canvasImageComponent.canvas.width).toBe(15);
    });
});

describe('drawOnCanvas', () => {
    // tslint:disable-next-line
    test('Draws an image on the canvas context using the horizontal ratio if it is lower', () => {
        const canvasImageComponent = initCanvasImageComponent();
        canvasImageComponent.drawColorOverlay = jest.fn();
        const canvasCtx = {} as CanvasRenderingContext2D;
        canvasCtx.drawImage = jest.fn();
        const image = {
            height: 30,
            width: 20,
        } as HTMLImageElement;

        canvasImageComponent.drawOnCanvas(
            canvasCtx,
            image,
            10,
            20,
            'colorOverlay',
            2,
        );

        expect(canvasCtx.drawImage).toHaveBeenCalledWith(
            image,
            -5,
            -5,
            20,
            30,
        );
    });

    // tslint:disable-next-line
    test('Draws an image on the canvas context using the vertical ratio if it is lower', () => {
        const canvasImageComponent = initCanvasImageComponent();
        canvasImageComponent.drawColorOverlay = jest.fn();
        const canvasCtx = {} as CanvasRenderingContext2D;
        canvasCtx.drawImage = jest.fn();
        const image = {
            height: 20,
            width: 30,
        } as HTMLImageElement;

        canvasImageComponent.drawOnCanvas(
            canvasCtx,
            image,
            20,
            10,
            'colorOverlay',
            2,
        );

        expect(canvasCtx.drawImage).toHaveBeenCalledWith(
            image,
            -5,
            -5,
            30,
            20,
        );
    });

    test('Calls drawColorOverlay with the expected values', () => {
        const canvasImageComponent = initCanvasImageComponent();
        canvasImageComponent.drawColorOverlay = jest.fn();
        const canvasCtx = {} as CanvasRenderingContext2D;
        canvasCtx.drawImage = jest.fn();
        const image = {} as HTMLImageElement;

        canvasImageComponent.drawOnCanvas(
            canvasCtx,
            image,
            10,
            15,
            'colorOverlay',
            2,
        );

        expect(canvasImageComponent.drawColorOverlay).toHaveBeenCalledWith(
            canvasCtx,
            10,
            15,
            'colorOverlay',
        );
    });
});

describe('drawColorOverlay', () => {
    test('Set globalCompositeOperation to source-in if none set', () => {
        const canvasImageComponent = initCanvasImageComponent();
        const canvasCtx = {} as CanvasRenderingContext2D;
        canvasCtx.fillRect = jest.fn();
        canvasImageComponent.drawColorOverlay(
            canvasCtx,
            10,
            10,
            'abc',
        );

        expect(canvasCtx.globalCompositeOperation).toBe('source-in');
    });

    test('Set globalCompositeOperation to value if set', () => {
        const canvasImageComponent = initCanvasImageComponent();
        const canvasCtx = {} as CanvasRenderingContext2D;
        canvasCtx.fillRect = jest.fn();
        canvasImageComponent.globalCompositeOperation = 'testGlobalComposite';
        canvasImageComponent.drawColorOverlay(
            canvasCtx,
            10,
            10,
            'abc',
        );

        expect(canvasCtx.globalCompositeOperation).toBe('testGlobalComposite');
    });

    test('Set canvas fillStyle to the colorOverlay', () => {
        const canvasImageComponent = initCanvasImageComponent();
        const canvasCtx = {} as CanvasRenderingContext2D;
        canvasCtx.fillRect = jest.fn();
        canvasImageComponent.drawColorOverlay(
            canvasCtx,
            10,
            10,
            'colorOverlay',
        );

        expect(canvasCtx.fillStyle).toBe('colorOverlay');
    });

    test('Fills a rectangle on the canvas', () => {
        const canvasImageComponent = initCanvasImageComponent();
        const canvasCtx = {} as CanvasRenderingContext2D;
        canvasCtx.fillRect = jest.fn();
        canvasImageComponent.drawColorOverlay(
            canvasCtx,
            10,
            15,
            'colorOverlay',
        );

        expect(canvasCtx.fillRect).toHaveBeenCalledWith(
            0, 0, 10, 15,
        );
    });

    test('Does not fill the rectangle if colorOverlay is not defined', () => {
        const canvasImageComponent = initCanvasImageComponent();
        const canvasCtx = {} as CanvasRenderingContext2D;
        canvasCtx.fillRect = jest.fn();
        canvasImageComponent.drawColorOverlay(
            canvasCtx,
            10,
            15,
            undefined,
        );

        expect(canvasCtx.fillRect).not.toHaveBeenCalled();
    });
});