import {
    AfterViewInit,
    ChangeDetectionStrategy,
    Component,
    ElementRef,
    Input,
    OnChanges,
    SimpleChanges,
    ViewChild,
} from '@angular/core';

import {
    PIGPrintGuideAreaInterface,
} from './../../models/index';

import {
    BrowserDetectorService,
    CanvasUtilitiesService,
    WindowResizeEventsService,
} from './../../helpers/services/index';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'canvas-guide-area-component',
    styleUrls: [
        './canvas-guide-area.component.scss',
    ],
    templateUrl: './canvas-guide-area.component.template.pug',
})
export class CanvasGuideAreaComponent implements OnChanges, AfterViewInit {
    @Input()
    public printGuideArea: PIGPrintGuideAreaInterface[];
    @Input()
    public guideAreaColor: string = '#E27B7B';
    @Input()
    public guideAreaStrokeWidth: number = 3;
    @Input()
    public guideAreaOpacity = 1;

    @ViewChild('canvasElement')
    public canvasElement: ElementRef;

    public get canvas(): HTMLCanvasElement {
        return this.canvasElement.nativeElement;
    }

    public get canvasCtx(): CanvasRenderingContext2D {
        return this.canvas.getContext('2d');
    }

    constructor(
        private _canvasUtilitiesService: CanvasUtilitiesService,
        private _windowResizeEventsService: WindowResizeEventsService,
        private _browserDetectorService: BrowserDetectorService,
    ) {}

    public ngOnChanges(changes: SimpleChanges) {
        if (!changes.printGuideArea || !changes.printGuideArea.firstChange) {
            this.drawOnCanvas();
        }
    }
    public ngAfterViewInit() {
        this.initCanvasSize();
        this.drawOnCanvas();
        this._windowResizeEventsService.addEvent(() => {
            this.initCanvasSize();
            this.drawOnCanvas();
        });
        if (this._browserDetectorService.isSafari()) {
            // Ensure canvas guide area is correctly initiated on Safari
            setTimeout(() => {
                this.initCanvasSize();
                this.drawOnCanvas();
            }, 500);
        }
    }

    public initCanvasSize() {
        this.canvas.height = this.canvas.offsetHeight;
        this.canvas.width = this.canvas.offsetWidth;
    }

    public clearCanvas(
        canvas: HTMLCanvasElement,
    ) {
        canvas.getContext('2d').clearRect(
            0, 0, canvas.width, canvas.height,
        );
    }

    public drawOnCanvas() {
        this.clearCanvas(this.canvas);
        const ctx = this.canvasCtx;
        const fitWidth = this.canvas.width;
        const fitHeight = this.canvas.height;
        ctx.strokeStyle = this.guideAreaColor;
        ctx.lineWidth = this.guideAreaStrokeWidth;
        ctx.globalAlpha = this.guideAreaOpacity;

        this.printGuideArea.forEach((printGuideArea) => {
            this._canvasUtilitiesService.getAdjustedGuideAreaPoints(
                printGuideArea,
                fitWidth,
                fitHeight,
                printGuideArea.widthAdjustedForNegativeBleed,
                printGuideArea.heightAdjustedForNegativeBleed,
            ).forEach((pointsArray) => {
                pointsArray.forEach((point, index) => {
                    if (index === 0) {
                        ctx.beginPath();
                        ctx.moveTo(
                            point.x,
                            point.y,
                        );
                    } else {
                        ctx.lineTo(
                            point.x,
                            point.y,
                        );
                    }
                });
                ctx.closePath();
                ctx.stroke();
            });
        });
    }
}