import {
    Component,
    ViewEncapsulation,
} from '@angular/core';

import {
    BorderUnit,
    CoordsInterface,
    DimensionsInterface,
    ImageEditorImageInterface,
    MaskImageMapInterface,
} from './../../../../src/models/index';

import {
    BleedAreaFillService,
    PIGService,
} from './../../../../src/helpers/services/index';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'example-image-editor-page-component',
    styleUrls: [
        './example-image-editor-page.component.scss',
    ],
    templateUrl: './example-image-editor-page.template.pug',
})
export class ExampleImageEditorPageComponent {
    public inputImageEditorTemplateId = 'sublimation_tote_bag';
    public inputImageEditorVariantName = 'cover';
    public imageEditorTemplateId = this.inputImageEditorTemplateId;
    public imageEditorVariantName = this.inputImageEditorVariantName;
    public renderedPigImageUrl: string;
    public showPrintArea = true;
    public testImageEditorData = this.getTestImageEditorData();
    public testForegroundImage = 'https://image.kite.ly/product_images/' +
            'awd_sublimation_tshirt/cover/foreground_multiply.png';
    public testImageEditorDataWithText = [
        this.getTestImageEditorData()[0],
        {
            imageEditorImage: {
                filters: '',
                mirror: false,
                rotate_degrees: 0,
                scale: 1,
                text: 'Some test text',
                textColorHex: '#FFFFFF',
                textFontFamily: 'sans serif',
                textFontSize: 20,
                tx: 0,
                ty: 0,
                borderWidth: 0,
                borderUnit: BorderUnit.None,
            },
            mask: this.getTestImageEditorData()[0].mask,
            maskOverlay: this.testForegroundImage,
        },
    ];

    public womansTShirtData = this.getWomansTShirtData();
    public assetSize: DimensionsInterface = {
        height: 3702,
        width: 4376,
    };

    public emptyImageEditorImage: ImageEditorImageInterface[] = [{
        filters: '',
        mirror: false,
        rotate_degrees: 0,
        scale: 1,
        tx: 0,
        ty: 0,
        urlToRender: null,
        url_full: null,
        url_preview: null,
        borderWidth: 0,
        borderUnit: BorderUnit.None,
    }];

    constructor(
        private _bleedAreaFillService: BleedAreaFillService,
        private _pigService: PIGService,
    ) {}

    public getTestImageEditorData(): MaskImageMapInterface[] {
        const maskScale = 0.9146341463414634;
        return [
            {
                imageEditorImage: {
                    filters: '',
                    mirror: false,
                    rotate_degrees: 0,
                    borderWidth: 0,
                    borderUnit: BorderUnit.None,
                    scale: 1,
                    tx: 0,
                    ty: 0,
                    urlToRender: 'https://s3.amazonaws.com/' +
                        'kiteshopify/' +
                        '3b1a994f-4d85-42f1-8507-9b16f5c2b270_preview.jpeg',
                    url_full: 'https://s3.amazonaws.com/kiteshopify/' +
                        '3b1a994f-4d85-42f1-8507-9b16f5c2b270_preview.jpeg',
                    url_preview: 'https://s3.amazonaws.com/kiteshopify/' +
                        '3b1a994f-4d85-42f1-8507-9b16f5c2b270_preview.jpeg',
                },
                mask: {
                    align: '',
                    bleed_area: {
                        heightAdjustedForNegativeBleed: 1110,
                        maskScale,
                        points: [[
                            { y: 227, x: 0 },
                            { y: 0, x: 304 },
                            { y: 0, x: 1009 },
                            { y: 227, x: 1312 },
                            { y: 627, x: 1312 },
                            { y: 627, x: 1133 },
                            { y: 1110, x: 1133 },
                            { y: 1110, x: 177 },
                            { y: 627, x: 177 },
                            { y: 627, x: 0 },
                        ]],
                        widthAdjustedForNegativeBleed: 1312,
                    },
                    blend_mode: undefined,
                    correction: undefined,
                    mask: 'https://image.kite.ly/product_images/' +
                        'awd_sublimation_tshirt/cover/mask.png',
                    enclosing_quadrilateral: null,
                },
            },
            {
                imageEditorImage: {
                    filters: '',
                    mirror: false,
                    rotate_degrees: 0,
                    scale: 1,
                    tx: 0,
                    ty: 0,
                    borderWidth: 0,
                    borderUnit: BorderUnit.None,
                    urlToRender: 'https://s3.amazonaws.com/' +
                        'kiteshopify/' +
                        'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
                    url_full: 'https://s3.amazonaws.com/kiteshopify/' +
                        'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
                    url_preview: 'https://s3.amazonaws.com/kiteshopify/' +
                        'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
                },
                mask: {
                    align: '',
                    bleed_area: {
                        heightAdjustedForNegativeBleed: 1200,
                        maskScale,
                        points: [[
                            { y: 330, x: 399 },
                            { y: 330, x: 811 },
                            { y: 777, x: 811 },
                            { y: 777, x: 399 },
                        ]],
                        widthAdjustedForNegativeBleed: 1200,
                    },
                    blend_mode: undefined,
                    correction: undefined,
                    mask: 'https://image.kite.ly/product_images/' +
                        'aa_womens_tshirt/mask.png',
                    enclosing_quadrilateral: null,
                },
            },
        ];
    }

    public getWomansTShirtData(): MaskImageMapInterface[] {
        return [{
                imageEditorImage: {
                filters: '',
                mirror: false,
                rotate_degrees: 0,
                scale: 1,
                tx: 0,
                ty: 0,
                borderWidth: 0,
                borderUnit: BorderUnit.None,
                urlToRender: 'https://s3.amazonaws.com/' +
                    'kiteshopify/' +
                    'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
                url_full: 'https://s3.amazonaws.com/kiteshopify/' +
                    'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
                url_preview: 'https://s3.amazonaws.com/kiteshopify/' +
                    'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
            },
            mask: {
                align: '',
                bleed_area: {
                    heightAdjustedForNegativeBleed: 1200,
                    maskScale: 1,
                    points: [[
                        { y: 301, x: 380 },
                        { y: 301, x: 821 },
                        { y: 806, x: 821 },
                        { y: 806, x: 380 },
                    ]],
                    widthAdjustedForNegativeBleed: 1200,
                },
                enclosing_quadrilateral: null,
                blend_mode: undefined,
                correction: undefined,
                mask: 'https://image.kite.ly/product_images/' +
                    'aa_womens_tshirt/mask.png',
            },
        }];
    }

    public updateTranslations([maskImageMap, translations]: [
        MaskImageMapInterface, CoordsInterface
    ]) {
        this.testImageEditorData = this.testImageEditorData
        .map((imageEditorData) => (
            imageEditorData.imageEditorImage.url_full ===
                maskImageMap.imageEditorImage.url_full
                ?
                {
                    ...imageEditorData,
                    imageEditorImage: {
                        ...imageEditorData.imageEditorImage,
                        tx: translations.x,
                        ty: translations.y,
                    },
                }
                :
                imageEditorData
        ));
        this._bleedAreaFillService.doesUserImageFillBleedArea$(
            this.testImageEditorData[0],
            this.assetSize,
            300,
        ).subscribe((resp) => {
            // tslint:disable-next-line
            console.log('Fits area', resp);
        });
    }

    public updateWomansTShirtTranslations([maskImageMap, translations]: [
        MaskImageMapInterface, CoordsInterface
    ]) {
        this.womansTShirtData = this.womansTShirtData
        .map((imageEditorData) => (
            imageEditorData.imageEditorImage.url_full ===
                maskImageMap.imageEditorImage.url_full
                ?
                {
                    ...imageEditorData,
                    imageEditorImage: {
                        ...imageEditorData.imageEditorImage,
                        tx: translations.x,
                        ty: translations.y,
                    },
                }
                :
                imageEditorData
        ));
    }

    public scaleUpWomansTShirt() {
        this.womansTShirtData = this.womansTShirtData.map((imageEditorData) => (
            {
                ...imageEditorData,
                imageEditorImage: {
                    ...imageEditorData.imageEditorImage,
                    scale: imageEditorData.imageEditorImage.scale + 0.5,
                },
            }
        ));
    }

    public scaleDownWomansTShirt() {
        this.womansTShirtData = this.womansTShirtData.map((imageEditorData) => (
            {
                ...imageEditorData,
                imageEditorImage: {
                    ...imageEditorData.imageEditorImage,
                    scale: imageEditorData.imageEditorImage.scale - 0.5,
                },
            }
        ));
    }

    public updateWomansTShirtRotations([maskImageMap, rotation]: [
        MaskImageMapInterface, number
    ]) {
        this.womansTShirtData = this.womansTShirtData
        .map((imageEditorData) => (
            imageEditorData.imageEditorImage.url_full ===
                maskImageMap.imageEditorImage.url_full
                ?
                {
                    ...imageEditorData,
                    imageEditorImage: {
                        ...imageEditorData.imageEditorImage,
                        rotate_degrees: rotation,
                    },
                }
                :
                imageEditorData
        ));
    }

    public updateWomansTShirtScaleAndTranslations(
        [
            maskImageMap,
            scale,
            coords,
        ]:
        [
            MaskImageMapInterface,
            number,
            CoordsInterface
        ],
    ) {
        if (scale > 0.025) {
            this.womansTShirtData = this.womansTShirtData
            .map((imageEditorData) => (
                imageEditorData.imageEditorImage.url_full ===
                    maskImageMap.imageEditorImage.url_full
                    ?
                    {
                        ...imageEditorData,
                        imageEditorImage: {
                            ...imageEditorData.imageEditorImage,
                            scale,
                            tx: coords.x,
                            ty: coords.y,
                        },
                    }
                    :
                    imageEditorData
            ));
        }
    }

    public deleteButtonClicked(maskImageMap: MaskImageMapInterface) {
        // tslint:disable-next-line
        console.log('delete button clicked on', maskImageMap);
    }

    public flipCanvasImage(imageNumber: number) {
        this.testImageEditorData = this.testImageEditorData
        .map((data, index) => (
            imageNumber === index
            ?
            {
                ...data,
                imageEditorImage: {
                    ...data.imageEditorImage,
                    mirror: !data.imageEditorImage.mirror,
                },
            }
            :
            data
        ));
    }

    public rotateCanvasImage(imageNumber: number) {
        this.testImageEditorData = this.testImageEditorData
        .map((data, index) => (
            imageNumber === index
            ?
            {
                ...data,
                imageEditorImage: {
                    ...data.imageEditorImage,
                    rotate_degrees: 90 + data.imageEditorImage.rotate_degrees,
                },
            }
            :
            data
        ));
    }

    public scaleCanvasImage(imageNumber: number, scaleUp: boolean) {
        this.testImageEditorData = this.testImageEditorData
        .map((data, index) => (
            imageNumber === index
            ?
            {
                ...data,
                imageEditorImage: {
                    ...data.imageEditorImage,
                    scale: data.imageEditorImage.scale + (scaleUp ? 0.1 : -0.1),
                },
            }
            :
            data
        ));
    }

    public invertCanvasImage(imageNumber: number) {
        const hasInverseFilters = (maskImageMap: MaskImageMapInterface) => {
            return maskImageMap.imageEditorImage.filters.includes('i');
        };
        this.testImageEditorData = this.testImageEditorData
        .map((data, index) => {
            if (imageNumber === index) {
                const newData = {
                    ...data,
                    imageEditorImage: {
                        ...data.imageEditorImage,
                        filters: hasInverseFilters(data) ? '' : 'i',
                    },
                };
                newData.imageEditorImage.urlToRender = this._pigService
                    .getUrlWithFilters(
                        newData.imageEditorImage.url_preview,
                        'aa_womens_tshirt',
                        newData.imageEditorImage.filters,
                    );
                return newData;
            }
            return data;
        });
    }

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

    public pinchRotateImage([
        maskImageMap, rotation,
    ]: [
        MaskImageMapInterface, number
    ]) {
        this.testImageEditorData = this.testImageEditorData
        .map((imageEditorData) => (
            imageEditorData.imageEditorImage.url_full ===
                maskImageMap.imageEditorImage.url_full
            ?
            {
                ...imageEditorData,
                imageEditorImage: {
                    ...imageEditorData.imageEditorImage,
                    rotate_degrees: rotation,
                },
            }
            :
            imageEditorData
        ));
    }

    public pinchScaleImage([
        maskImageMap, scale,
    ]: [
        MaskImageMapInterface, number
    ]) {
        this.testImageEditorData = this.testImageEditorData
        .map((imageEditorData) => (
            imageEditorData.imageEditorImage.url_full ===
                maskImageMap.imageEditorImage.url_full
            ?
            {
                ...imageEditorData,
                imageEditorImage: {
                    ...imageEditorData.imageEditorImage,
                    scale,
                },
            }
            :
            imageEditorData
        ));
    }

    public updateTranslationsWithText([maskImageMap, translations]: [
        MaskImageMapInterface, CoordsInterface
    ]) {
        this.testImageEditorDataWithText = this.testImageEditorDataWithText
        .map((imageEditorData) => (
            (imageEditorData.imageEditorImage as ImageEditorImageInterface)
                .url_full ===
                maskImageMap.imageEditorImage.url_full
                ?
                {
                    ...imageEditorData,
                    imageEditorImage: {
                        ...imageEditorData.imageEditorImage,
                        tx: translations.x,
                        ty: translations.y,
                    },
                }
                :
                imageEditorData
        ));
    }

    public flipText() {
        this.testImageEditorDataWithText = this._updateMaskImageMapArray(
            this.testImageEditorDataWithText,
            1,
            {
                mirror: !this.testImageEditorDataWithText[1]
                    .imageEditorImage.mirror,
            } as ImageEditorImageInterface,
        );
    }

    public rotateText() {
        this.testImageEditorDataWithText = this._updateMaskImageMapArray(
            this.testImageEditorDataWithText,
            1,
            {
                rotate_degrees: this.testImageEditorDataWithText[1]
                    .imageEditorImage.rotate_degrees + 15,
            } as ImageEditorImageInterface,
        );
    }

    public scaleTextUp() {
        this.testImageEditorDataWithText = this._updateMaskImageMapArray(
            this.testImageEditorDataWithText,
            1,
            {
                scale: this.testImageEditorDataWithText[1]
                    .imageEditorImage.scale + 1,
            } as ImageEditorImageInterface,
        );
    }

    public scaleTextDown() {
        this.testImageEditorDataWithText = this._updateMaskImageMapArray(
            this.testImageEditorDataWithText,
            1,
            {
                scale: this.testImageEditorDataWithText[1]
                    .imageEditorImage.scale - 1,
            } as ImageEditorImageInterface,
        );
    }

    public updateImageEditorTemplateId() {
        this.imageEditorTemplateId = this.inputImageEditorTemplateId;
        this.imageEditorVariantName = this.inputImageEditorVariantName;
    }

    public updateRenderedPigImage() {
        const imageEditorImage = this.testImageEditorData[0].imageEditorImage;
        this.renderedPigImageUrl = this._pigService.getRenderedImage({
            filters: imageEditorImage.filters,
            imageUrl: imageEditorImage.url_full,
            mirror: imageEditorImage.mirror,
            rotateDegrees: imageEditorImage.rotate_degrees,
            scale: imageEditorImage.scale,
            templateId: this.imageEditorTemplateId,
            translateX: imageEditorImage.tx,
            translateY: imageEditorImage.ty,
            variantName: this.imageEditorVariantName,
        });
    }

    private _updateMaskImageMapArray(
        array: MaskImageMapInterface[],
        indexOfItemToUpdate: number,
        imageEditorUpdates: ImageEditorImageInterface,
    ) {
        return array.map((imageEditorData, index) => (
            index === indexOfItemToUpdate
                ?
                {
                    ...imageEditorData,
                    imageEditorImage: {
                        ...imageEditorData.imageEditorImage,
                        ...imageEditorUpdates,
                    },
                }
                :
                imageEditorData
        ));
    }
}