import { Component } from '@angular/core';
import { CanvasUtilitiesService, PIGService } from '../../../../../src/helpers/services';
import {
  AssetSize,
  BorderUnit,
  CM_PER_INCH,
  CoordsInterface,
  ImageEditorImageInterface,
  MaskImageMapInterface,
  PIGMaskInterface,
} from '../../../../../src/models/index';

@Component({
  selector: 'image-editor-with-border',
  styleUrls: ['../example-image-editor-page.component.scss'],
  templateUrl: './image-editor-with-border.template.pug',
})
export class ImageEditorWithBorderComponent {
    public showPrintArea = true;
    public assetSize = this._assetSize;
    public pigPreviewUrl: string | null = null;
    public maskMap = [{mask: this._mask, imageEditorImage: this._imageEditorImage}];
    public dpi = 300;
    public BorderUnit = BorderUnit;

    constructor(private _pigService: PIGService) {}

    public changeBorderUnit = (newUnit: BorderUnit) => {
        if (newUnit !== this.maskMap[0].imageEditorImage.borderUnit) {
            this.updateImage({ borderWidth: 0, borderUnit: newUnit });
        }
    }

    public changeBorder = (newValue: string) => this.updateImage({
        borderWidth: this.maxBorder > parseFloat(newValue)
            ? parseFloat(newValue)
            : this.maxBorder,
    })

    public isUnitSelected = (unit: BorderUnit): boolean => this.borderUnit === unit;

    public rotate = () => this.updateImage({rotate_degrees: 90 + this.maskMap[0].imageEditorImage.rotate_degrees});

    public scale = (scale: number) => this.updateImage({scale: this.maskMap[0].imageEditorImage.scale + scale});

    public updateScaleAndTranslations = ([ _, scale, coords ]: [MaskImageMapInterface, number, CoordsInterface]) => {
        if (scale > 0.025) {
            this.updateImage({scale, tx: coords.x, ty: coords.y });
        }
    }

    public updateTranslations = ([_, {x, y}]: [MaskImageMapInterface, CoordsInterface]) => this.updateImage({tx: x, ty: y});

    public updatePigPreview = () => {
        const imageEditorImage = this.maskMap[0].imageEditorImage;
        this.pigPreviewUrl = this._pigService.getRenderedImage({
            border: imageEditorImage.borderWidth + this.borderUnitLabel,
            filters: imageEditorImage.filters,
            imageUrl: imageEditorImage.url_full,
            mirror: imageEditorImage.mirror,
            rotateDegrees: -imageEditorImage.rotate_degrees,
            scale: imageEditorImage.scale,
            templateId: 'GLOBAL-CFP-6x8-PORTRAIT',
            translateX: imageEditorImage.tx,
            translateY: imageEditorImage.ty,
            variantName: 'black_cover',
        });
    }

    public updateImage = (imageEditorImageProps: Partial<Pick<ImageEditorImageInterface, keyof ImageEditorImageInterface>>) => {
        this.maskMap = [{
            ...this.maskMap[0],
            imageEditorImage: { ...this.maskMap[0].imageEditorImage, ...imageEditorImageProps },
        }];
    }

    public toggleShowPrintArea = () => {
        this.showPrintArea = !this.showPrintArea;
    }

    public get previewButtonText(): string {
        return this.pigPreviewUrl
            ? 'Update PIG preview'
            : 'Show PIG preview';
    }

    public get borderUnitLabel(): string {
        return this.borderUnit === BorderUnit.Inch
            ? 'in'
            : 'cm';
    }

    public get borderWidth(): number {
        return this.maskMap[0].imageEditorImage.borderWidth;
    }

    public get borderUnit(): BorderUnit {
        return this.maskMap[0].imageEditorImage.borderUnit;
    }

    public get maxBorder(): number {
        return this.borderUnit === BorderUnit.Inch
            ? this._maxBorderSizeInInches
            : this._maxBorderSizeInInches * CM_PER_INCH;
    }

    private get _maxBorderSizeInInches(): number {
        return Math.min(this.assetSize.width, this.assetSize.height) / this.dpi / 2;
    }

    private get _imageEditorImage(): ImageEditorImageInterface {
        return {
            borderWidth: 0,
            borderUnit: BorderUnit.Inch,
            filters: '',
            fulfilment_name: null,
            mirror: false,
            originalHeight: 60,
            originalWidth: 60,
            rotate_degrees: 0,
            scale: 1,
            tx: 0,
            ty: 0,
            urlToRender: 'https://s3.amazonaws.com/kiteshopify/2df8955a-d2ec-4ffc-85ab-cee98c19100d_preview.png',
            url_full: 'https://s3.amazonaws.com/kiteshopify/2df8955a-d2ec-4ffc-85ab-cee98c19100d.png',
            url_preview: 'https://s3.amazonaws.com/kiteshopify/2df8955a-d2ec-4ffc-85ab-cee98c19100d_preview.png',
        };
    }

    private get _mask(): PIGMaskInterface {
        return {
            align: 'center',
            bleed_area: {
                heightAdjustedForNegativeBleed: 1000,
                maskScale: 1,
                points: [[
                    { y: 112, x: 209 },
                    { y: 112, x: 792 },
                    { y: 889, x: 792 },
                    { y: 889, x: 209 },
                ]],
                type: 'rectangle',
                widthAdjustedForNegativeBleed: 1000,
            },
            blend_mode: 'normal',
            correction: 1,
            enclosing_quadrilateral: {
                bottom_left: [209, 112],
                bottom_right: [792, 112],
                size: {
                    height: 777,
                    width: 583,
                },
                top_left: [209, 889],
                top_right: [792, 889],
            },
            mask: 'https://image.kite.ly/product_images/GLOBAL-CFP-6x8-PORTRAIT/black_cover/mask.png',
        };
    }

    private get _assetSize(): AssetSize {
        return {
            bleed_abs: {top: 0, left: 0, right: 0, bottom: 0},
            bleed_rel: {top: 0, left: 0, right: 0, bottom: 0},
            correction: 1,
            height: 2400,
            width: 1800,
        };
    }
}