import 'reflect-metadata';

import {
    ElementRef,
} from '@angular/core';

import * as mock from '../../../mocks/index';
const initMockDocument = mock.document(jest);

import {
    SetDragImageToHtmlDirective,
} from './set-drag-image-to-html.directive';

const initSetDragImageToHtmlDirective = (
    document?,
) => {
    return new SetDragImageToHtmlDirective(
        document ? document : initMockDocument(),
    );
};

describe('dragStart', () => {
    // tslint:disable-next-line
    test('It sets imageDragClone to a clone of setDragImageToHtml', () => {
        const setDragImageToHtml =
            initSetDragImageToHtmlDirective();
        const dragEvent = {
            dataTransfer: {},
        } as DragEvent;
        dragEvent.dataTransfer.setDragImage = jest.fn();
        setDragImageToHtml.imageDragClone = null;
        const mockReturnClone = {
            style: {},
        } as HTMLElement;
        const elementToUseAsDragImage = {
            nativeElement: {},
        } as ElementRef;
        elementToUseAsDragImage.nativeElement.cloneNode =
            jest.fn().mockReturnValue(mockReturnClone);
        setDragImageToHtml.elementToUseAsDragImage =
            elementToUseAsDragImage;

        setDragImageToHtml.dragStart(dragEvent);

        expect(setDragImageToHtml.imageDragClone)
        .toBe(mockReturnClone);
    });

    const itSetsMaxWidthTo = (
        inputMaxWidth: number,
        expectedMaxWidth: string,
    ) => {
        const setDragImageToHtml =
            initSetDragImageToHtmlDirective();
        const dragEvent = {
            dataTransfer: {},
        } as DragEvent;
        dragEvent.dataTransfer.setDragImage = jest.fn();
        setDragImageToHtml.imageDragClone = null;
        const mockReturnClone = {
            style: {},
        } as HTMLElement;
        const elementToUseAsDragImage = {
            nativeElement: {},
        } as ElementRef;
        elementToUseAsDragImage.nativeElement.cloneNode =
            jest.fn().mockReturnValue(mockReturnClone);
        setDragImageToHtml.elementToUseAsDragImage =
            elementToUseAsDragImage;
        if (inputMaxWidth) {
            setDragImageToHtml.maxWidth = inputMaxWidth;
        }

        setDragImageToHtml.dragStart(dragEvent);

        expect(
            setDragImageToHtml.imageDragClone
            .style.maxWidth,
        ).toBe(expectedMaxWidth);
    };

    // tslint:disable-next-line
    test('It sets imageDragClone maxWidth to the input maxWidth', () => {
        itSetsMaxWidthTo(10011, '10011px');
    });

    // tslint:disable-next-line
    test('It sets imageDragClone maxWidth to the 200 if maxWidth is not defined', () => {
        itSetsMaxWidthTo(undefined, '200px');
    });

    // tslint:disable-next-line
    test('It appends the imageDragClone to the document body', () => {
        const document = initMockDocument();
        const setDragImageToHtml =
            initSetDragImageToHtmlDirective(
                document,
            );
        const dragEvent = {
            dataTransfer: {},
        } as DragEvent;
        dragEvent.dataTransfer.setDragImage = jest.fn();
        setDragImageToHtml.imageDragClone = null;
        const mockReturnClone = {
            style: {},
        } as HTMLElement;
        const elementToUseAsDragImage = {
            nativeElement: {},
        } as ElementRef;
        elementToUseAsDragImage.nativeElement.cloneNode =
            jest.fn().mockReturnValue(mockReturnClone);
        setDragImageToHtml.elementToUseAsDragImage =
            elementToUseAsDragImage;

        setDragImageToHtml.dragStart(dragEvent);

        expect(
            document.body.appendChild,
        ).toHaveBeenCalledWith(
            mockReturnClone,
        );
    });

    // tslint:disable-next-line
    test('It sets the dragEvent dragImage to imageDragClone', () => {
        const setDragImageToHtml =
            initSetDragImageToHtmlDirective();
        const dragEvent = {
            dataTransfer: {},
        } as DragEvent;
        const setDragImageMock = jest.fn();
        dragEvent.dataTransfer.setDragImage = setDragImageMock;
        setDragImageToHtml.imageDragClone = null;
        const mockReturnClone = {
            style: {},
        } as HTMLElement;
        const elementToUseAsDragImage = {
            nativeElement: {},
        } as ElementRef;
        elementToUseAsDragImage.nativeElement.cloneNode =
            jest.fn().mockReturnValue(mockReturnClone);
        setDragImageToHtml.elementToUseAsDragImage =
            elementToUseAsDragImage;

        setDragImageToHtml.dragStart(dragEvent);

        expect(
            setDragImageMock.mock.calls[0][0],
        ).toBe(
            mockReturnClone,
        );
    });

    // tslint:disable-next-line
    test('It sets the dragEvent dragImage coords to the center of imageDragClone', () => {
        const setDragImageToHtml =
            initSetDragImageToHtmlDirective();
        const dragEvent = {
            dataTransfer: {},
        } as DragEvent;
        const setDragImageMock = jest.fn();
        dragEvent.dataTransfer.setDragImage = setDragImageMock;
        setDragImageToHtml.imageDragClone = null;
        const mockReturnClone = {
            offsetHeight: 200,
            offsetWidth: 100,
            style: {},
        } as HTMLElement;
        const elementToUseAsDragImage = {
            nativeElement: {},
        } as ElementRef;
        elementToUseAsDragImage.nativeElement.cloneNode =
            jest.fn().mockReturnValue(mockReturnClone);
        setDragImageToHtml.elementToUseAsDragImage =
            elementToUseAsDragImage;

        setDragImageToHtml.dragStart(dragEvent);

        expect(
            setDragImageMock.mock.calls[0][1],
        ).toBe(50);
        expect(
            setDragImageMock.mock.calls[0][2],
        ).toBe(100);
    });
});

describe('dragEnd', () => {
    // tslint:disable-next-line
    test('It removes the imageDragClone from the document body', () => {
        const document = initMockDocument();
        const setDragImageToHtml =
            initSetDragImageToHtmlDirective(
                document,
            );
        const imageDragClone = {} as HTMLElement;
        setDragImageToHtml.imageDragClone = imageDragClone;

        setDragImageToHtml.dragEnd();

        expect(
            document.body.removeChild,
        ).toHaveBeenCalledWith(
            imageDragClone,
        );
    });

    // tslint:disable-next-line
    test('It sets imageDragClone to null', () => {
        const setDragImageToHtml =
            initSetDragImageToHtmlDirective();
        const imageDragClone = {} as HTMLElement;
        setDragImageToHtml.imageDragClone = imageDragClone;

        setDragImageToHtml.dragEnd();

        expect(
            setDragImageToHtml.imageDragClone,
        ).toBeNull();
    });
});