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

import {
    BasicTabInterface,
    FulfilmentFieldControlComponentInterface,
    ImageCollectorImageInterface,
} from './../../../../src/models/index';

import {
    fadeInOutAnimation,
} from './../../../../src/helpers/animations/index';

import {
    createFormGroupState,
} from 'ngrx-forms';

@Component({
    animations: [
        fadeInOutAnimation(),
    ],
    encapsulation: ViewEncapsulation.None,
    selector: 'angular-components-component',
    styleUrls: [
        'angular-components.component.scss',
    ],
    templateUrl: './angular-components.component.template.pug',
})
export class AngularComponentsComponent implements OnInit {
    public spinnerProgress = 0;
    public spinnerIsOn = true;

    public isToggleOn = false;

    public isRadioButtonOn = false;

    public selectedFilters: string[] = [];

    public selectedFilterChips: string[] = [];

    public popoverUpVisible = false;
    public popoverDownVisible = false;
    public isFilterSelectionVisible = false;
    public showModal = false;

    public formGroup = createFormGroupState<{
        checkbox: boolean,
        radio: string,
        test: string,
        textarea: string,
    }>(
        'form',
        {
            checkbox: true,
            radio: '2',
            test: 'test123',
            textarea: 'Lorem ipsum dolor sit amet',
        },
    );
    public formGroupNumber = createFormGroupState<{
        test: number,
    }>(
        'formNumber',
        {
            test: 5,
        },
    );

    public imageSelectorOptions = [
        {
            name: 'foo',
            src:
            'https://s3.amazonaws.com/kiteshopify/' +
                'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
        },
        {
            name: 'bar',
            src:
            'https://s3.amazonaws.com/kiteshopify/' +
                '3b1a994f-4d85-42f1-8507-9b16f5c2b270_preview.jpeg',
        },
        {
            src:
                'https://s3.amazonaws.com/kiteshopify/' +
                    '09b61a94-3ae3-435c-b4dc-65a41f7a339c_preview.jpeg',
        },
        {
            src:
                'https://s3.amazonaws.com/kiteshopify/' +
                    '93a13de6-b3aa-485f-a745-957f9db0afa0_preview.jpeg',
        },
    ];

    public selectedImageSrc = this.imageSelectorOptions[0].src;

    public imageCollectorImageFiles: ImageCollectorImageInterface[] = [
        {
            dimensions: {
                height: 750,
                width: 1000,
            },
            id: '0',
            isUploadComplete: true,
            thumbnailUrl: 'https://s3.amazonaws.com/kiteshopify/' +
                'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
            timesUsed: 0,
            url: 'https://s3.amazonaws.com/kiteshopify/' +
                'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
        },
        {
            dimensions: {
                height: 750,
                width: 1125,
            },
            id: '1',
            isUploadComplete: true,
            thumbnailUrl: 'https://s3.amazonaws.com/kiteshopify/' +
                '3b1a994f-4d85-42f1-8507-9b16f5c2b270_preview.jpeg',
            timesUsed: 0,
            url: 'https://s3.amazonaws.com/kiteshopify/' +
                '3b1a994f-4d85-42f1-8507-9b16f5c2b270_preview.jpeg',
        },
        {
            dimensions: {
                height: 750,
                width: 1000,
            },
            id: '2',
            isUploadComplete: true,
            thumbnailUrl: 'https://s3.amazonaws.com/kiteshopify/' +
                'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
            timesUsed: 1,
            url: 'https://s3.amazonaws.com/kiteshopify/' +
                'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
        },
        {
            dimensions: {
                height: 750,
                width: 1125,
            },
            id: '3',
            isUploadComplete: true,
            thumbnailUrl: 'https://s3.amazonaws.com/kiteshopify/' +
                '3b1a994f-4d85-42f1-8507-9b16f5c2b270_preview.jpeg',
            timesUsed: 0,
            url: 'https://s3.amazonaws.com/kiteshopify/' +
                '3b1a994f-4d85-42f1-8507-9b16f5c2b270_preview.jpeg',
        },
        {
            dimensions: {
                height: 750,
                width: 1000,
            },
            id: '4',
            isUploadComplete: true,
            thumbnailUrl: 'https://s3.amazonaws.com/kiteshopify/' +
                'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
            timesUsed: 3,
            url: 'https://s3.amazonaws.com/kiteshopify/' +
                'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
        },
        {
            dimensions: {
                height: 750,
                width: 1125,
            },
            id: '5',
            isUploadComplete: true,
            thumbnailUrl: 'https://s3.amazonaws.com/kiteshopify/' +
                '3b1a994f-4d85-42f1-8507-9b16f5c2b270_preview.jpeg',
            timesUsed: 0,
            url: 'https://s3.amazonaws.com/kiteshopify/' +
                '3b1a994f-4d85-42f1-8507-9b16f5c2b270_preview.jpeg',
        },
        {
            dimensions: {
                height: 750,
                width: 1000,
            },
            id: '6',
            isUploadComplete: true,
            thumbnailUrl: 'https://s3.amazonaws.com/kiteshopify/' +
                'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
            timesUsed: 0,
            url: 'https://s3.amazonaws.com/kiteshopify/' +
                'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
        },
        {
            dimensions: undefined,
            id: '7',
            isUploadComplete: false,
            thumbnailUrl: undefined,
            timesUsed: 0,
            uploadProgress: 30,
            url: undefined,
        },
        {
            dimensions: undefined,
            id: '8',
            isUploadComplete: false,
            thumbnailUrl: undefined,
            timesUsed: 0,
            url: undefined,
        },
    ];

    public imageCollectorSelectedImage: ImageCollectorImageInterface;

    public cookieWarningVisible = true;

    public carouselIds = [];
    public selectedCarouselId = '0';

    public numberPickerValue = 1;

    public isLoadingButtonLoading = false;

    public isLoadingOverlayVisible = false;

    public selectedRatingForStarRating: number;
    public selectedRatingForStarRatingWithTooltips: number;

    public mockProdShippingAndPriceContent = {
        shippingInfo: [
            {
                additionalItemCostExcludingVat: [
                    {currency: 'CHF', value: 1.97},
                    {currency: 'NZD', value: 2.94},
                    {currency: 'AUD', value: 2.71},
                    {currency: 'GBP', value: 1.5},
                ],
                carrierMethod: 'Second Class',
                carrierName: 'Royal Mail',
                country: [{countryCode3: 'GBR', name: 'United Kingdom'}],
                maxDeliveryTimeWorkingDays: 5,
                region: 'United Kingdom',
                shippingTime: '2-5 Working Days',
                tierCostExcludingVat: [
                    {currency: 'CHF', value: 3.28},
                    {currency: 'NZD', value: 4.9},
                    {currency: 'AUD', value: 4.53},
                    {currency: 'GBP', value: 3},
                ],
                tracked: null,
            },
            {
                additionalItemCostExcludingVat: [
                    {currency: 'CHF', value: 1.97},
                     {currency: 'NZD', value: 2.94},
                     {currency: 'AUD', value: 2.71},
                     {currency: 'GBP', value: 1.5},
                ],
                carrierMethod: 'Standard',
                carrierName: 'P2P / Trakpak',
                country: [
                    {countryCode3: 'SVN', name: 'Slovenia'},
                    {countryCode3: 'ROU', name: 'Romania'},
                ],
                maxDeliveryTimeWorkingDays: 8,
                region: 'EU1',
                shippingTime: '3-8 Working Days',
                tierCostExcludingVat: [
                    {currency: 'CHF', value: 3.93},
                    {currency: 'NZD', value: 5.88},
                    {currency: 'AUD', value: 5.43},
                    {currency: 'GBP', value: 3.25},
                ],
                tracked: true,
            },
            {
                additionalItemCostExcludingVat: [],
                carrierMethod: 'Standard',
                carrierName: 'P2P / Trakpak',
                country: [
                    {countryCode3: 'SVN', name: 'Slovenia'},
                    {countryCode3: 'ROU', name: 'Romania'},
                ],
                maxDeliveryTimeWorkingDays: 8,
                region: 'EU1',
                shippingTime: '3-8 Working Days',
                tierCostExcludingVat: [],
                tracked: null,
            },
        ],
        shippingTemplates: new Map([
            ['Foo 1 (shipped from UK)', true],
            ['Foo 2 (shipped from US)', false],
        ]),
        shippingToCountries: new Map([
            ['UK', false],
            ['US', true],
        ]),
    };

    public mockColoursMaterialsTechContent = {
        coloursByProductDisplaySku: {
            'Bar (shipped from US)': [
                {
                    hexCode: '#000000',
                    name: 'Black',
                },
                {
                    hexCode: '#FF0000',
                    name: 'Red',
                },
                {
                    hexCode: '#00FF00',
                    name: 'Green',
                },
                {
                    hexCode: '#0000FF',
                    name: 'Blue',
                },
            ],
            'Foo (shipped from UK)': [
                {
                    hexCode: '#FFFFFF',
                    name: 'White',
                },
                {
                    hexCode: '#FF0000',
                    name: 'Red',
                },
                {
                    hexCode: '#00FF00',
                    name: 'Green',
                },
                {
                    hexCode: '#0000FF',
                    name: 'Blue',
                },
            ],
        },
        materialsByProductDisplaySku: {
            'Bar (shipped from US)': 'DTG SRGB Color Channel Water Based Ink',
            'Foo (shipped from UK)': 'DTG SRGB Colour Channel Water Based Ink',
        },
        productDisplaySkus: [
            'Foo (shipped from UK)',
            'Bar (shipped from US)',
        ],
    };

    public mockProductSizesContent = {
        apparelSizeChart: new Map(
            [
                ['Garment Length', ['10', '12', '14', '16']],
                ['Garment Width', ['5', '6', '7', '8']],
                ['UK Size', ['8-10', '10-12', '12-14', '14-16']],
            ],
        ),
        productDisplaySkus: new Map([
            ['Foo (Shipped from UK)', true],
            ['Bar (Shipped from US)', false],
        ]),
        sizes: ['S', 'M', 'L', 'XL'],
        unitsOfMeasure: new Map(
            [
                ['inch', true],
                ['cm', false],
            ],
        ),
    };

    public mockProdCareAndPrintAreaContent = {
        careInstructionsByDisplaySku: {
            'Bar (shipped from the US)': 'Lorem ipsum',
            'Foo (shipped from the UK)': 'Dolor sir amet',
        },
        designTemplateByDisplaySku: {
            'Bar (shipped from the US)': {
                filename: 'Foo.psd',
                formattedDpi: '300dpi',
                formattedMeasurements: '10in x 15in',
                location: 'Main',
                url: '/foo.psd',
            },
            'Foo (shipped from the UK)': {
                filename: 'Other.psd',
                formattedDpi: '150dpi',
                formattedMeasurements: '15in x 30in',
                location: 'Back',
                url: '/other.psd',
            },
        },
        unitsOfMeasure: new Map([
            ['inch', true],
            ['cm', false],
        ]),
    };

    public mockProductsAndPricesContent = [
        {
            formattedPrice: '10.99',
            formattedPrintArea: '10cm x 20cm',
            formattedPrintQuality: '150dpi',
            product: 'Foo',
            template: {
                filename: 'foo.psd',
                url: '/foo.psd',
            },
        },
        {
            formattedPrice: '10.99',
            formattedPrintArea: '10cm x 20cm',
            formattedPrintQuality: '150dpi',
            product: 'Bar',
            template: {
                filename: 'bar.psd',
                url: '/bar.psd',
            },
        },
        {
            formattedPrice: '10.99',
            formattedPrintArea: '10cm x 20cm',
            formattedPrintQuality: '150dpi',
            product: 'Widgets',
            template: {
                filename: 'widgets.psd',
                url: '/widgets.psd',
            },
        },
        {
            formattedPrice: '10.99',
            formattedPrintArea: '10cm x 20cm',
            formattedPrintQuality: '150dpi',
            product: 'Doodads',
            template: {
                filename: 'doodads.psd',
                url: '/doodads.psd',
            },
        },
    ];

    public basicTabs: BasicTabInterface[] = [{
        id: '1',
        isSelected: true,
        name: 'tab 1',
    }, {
        id: '2',
        isSelected: false,
        name: 'tab 2',
    }];

    public fulfilmentFields: FulfilmentFieldControlComponentInterface[] = [{
        cost: {
            GBP: '10',
        },
        editToolsMenuOpen: false,
        fieldName: 'f1',
        imageUrl: 'https://s3.amazonaws.com/kiteshopify/' +
            'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
        name: 'Field 1',
    }, {
        cost: {
            GBP: '15',
        },
        editToolsMenuOpen: false,
        fieldName: 'f2',
        imageUrl: 'https://s3.amazonaws.com/kiteshopify/' +
            'e2f57aa4-10a4-47e4-a87a-99bf8c4730dc_preview.jpeg',
        name: 'Field 2',
    }];

    public ngOnInit() {
        this.startSpinnerLoop();
    }

    public startSpinnerLoop() {
        setTimeout(() => {
            if (this.spinnerIsOn && this.spinnerProgress < 100) {
                this.spinnerProgress += 1;
            }
            this.startSpinnerLoop();
        }, 25);
    }

    public resetSpinner() {
        this.spinnerProgress = 0;
    }

    public toggleSpinner() {
        this.spinnerIsOn = !this.spinnerIsOn;
    }

    public onToggle(toggleValue: boolean) {
        // tslint:disable-next-line
        console.log('New toggle value', toggleValue);
    }

    public onDisabledClick($e) {
        // tslint:disable-next-line
        console.log('Disabled toggle clicked');
    }

    public toggleFilterChip(filter: string) {
        // tslint:disable-next-line
        console.log(`Toggling filter ${filter}`);
        this.selectedFilterChips = this.selectedFilterChips.includes(filter)
            ? this.selectedFilterChips.filter(
                (selected) => selected !== filter,
            )
            : [
                ...this.selectedFilterChips,
                filter,
            ];
    }

    public clearFilterChips() {
        // tslint:disable-next-line
        console.log('Clearing all filters');
        this.selectedFilterChips = [];
    }

    public filtersChanged(newFilters: string[]) {
        // tslint:disable-next-line
        console.log('newFilters', newFilters);
        this.selectedFilters = newFilters;
    }

    public dropdownChanged(newValue: string) {
        // tslint:disable-next-line
        console.log('dropdownValue', newValue);
    }

    public onFilesSelected(files: FileList) {
        // tslint:disable-next-line
        console.log('files', files);
    }

    public onChecked(checked: boolean) {
        // tslint:disable-next-line
        console.log('checked', checked);
    }

    public onSelected(selected: string) {
        this.isRadioButtonOn = true;
        // tslint:disable-next-line
        console.log('selected', selected);
    }

    public onAdjustValueBarChange(newValue: number) {
        // tslint:disable-next-line
        console.log('adjust value bar change', newValue);
    }

    public onImageSelectorSelected(source: string) {
        this.selectedImageSrc = source;
        // tslint:disable-next-line
        console.log('selected source', source);
    }

    public onImageCollectorFilesUploaded(files: FileList) {
        // tslint:disable-next-line
        console.log('image collector files', files);
    }

    public onImageCollectorImageClick(imageFile: ImageCollectorImageInterface) {
        this.imageCollectorSelectedImage = imageFile;
        // tslint:disable-next-line
        console.log('image collector click', imageFile);
    }

    public onDropFiles(files: FileList) {
        // tslint:disable-next-line
        console.log('dropped files', files);
    }

    public onCookieWarningAccept() {
        // tslint:disable-next-line
        console.log('Cookie warning clicked. Hiding now...');
        this.cookieWarningVisible = false;
    }

    public carouselItemSelected(selectedId: string) {
        this.selectedCarouselId = selectedId;
    }

    public carouselAddClicked() {
        this.carouselIds = [
            ...this.carouselIds,
            String(this.carouselIds.length + 1),
        ];
    }

    public decreaseNumberPickerValue() {
        this.numberPickerValue--;
    }

    public increaseNumberPickerValue() {
        this.numberPickerValue++;
    }

    public setLoading() {
        this.isLoadingButtonLoading = true;
        setTimeout(() => {
            this.isLoadingButtonLoading = false;
        }, 3000);
    }

    public toggleLoadingOverlay() {
        this.isLoadingOverlayVisible = !this.isLoadingOverlayVisible;
    }

    public changeShippingTemplate(newTemplate: string) {
        // tslint:disable-next-line
        console.log(newTemplate);
    }

    public stripeElementSuccess(strikeToken: string) {
        // tslint:disable-next-line
        console.log('created stripe token', strikeToken);
    }

    public stripeElementsCardDeclined(errorMessage: string) {
        // tslint:disable-next-line
        console.log('card declined', errorMessage);
    }

    public tabClicked(tabId: string) {
        this.basicTabs = this.basicTabs.map((tab) => ({
            ...tab,
            isSelected: tab.id === tabId,
        }));
    }

    public fulfilmentFieldDeleteClicked() {
        // tslint:disable-next-line
        console.log('fulfilment field delete clicked');
    }

    public fulfilmentFieldReplaceImage() {
        // tslint:disable-next-line
        console.log('fulfilment field replace image');
    }

    public fulfilmentFieldReplaceUploadFilesError() {
        // tslint:disable-next-line
        console.log('fulfilment field replace upload files error');
    }

    public fulfilmentFieldInvertClicked() {
        // tslint:disable-next-line
        console.log('fulfilment field invert clicked');
    }

    public fulfilmentFieldAlignHorizontalClicked() {
        // tslint:disable-next-line
        console.log('fulfilment field align horizontal clicked');
    }

    public fulfilmentFieldAlignVerticalClicked() {
        // tslint:disable-next-line
        console.log('fulfilment field align vertical clicked');
    }

    public fulfilmentFieldResetClicked() {
        // tslint:disable-next-line
        console.log('fulfilment field reset clicked');
    }

    public fulfilmentFieldSectionClicked() {
        // tslint:disable-next-line
        console.log('fulfilment field section clicked');
    }

    public fulfilmentEditToolsMenuToggle(fulfilmentFieldName: string) {
        if (fulfilmentFieldName === this.fulfilmentFields[0].fieldName) {
            // tslint:disable-next-line
            this.fulfilmentFields[0].editToolsMenuOpen =
                !(this.fulfilmentFields[0].editToolsMenuOpen);
        }
    }

    public selectRatingForStarRating(rating: number) {
        // tslint:disable-next-line
        console.log(`Selected ${ rating } stars`);
        this.selectedRatingForStarRating = rating;
    }

    public selectRatingForStarRatingWithTooltips(rating: number) {
        // tslint:disable-next-line
        console.log(`Selected ${ rating } stars`);
        this.selectedRatingForStarRatingWithTooltips = rating;
    }

    public onErrorCallToAction() {
        // tslint:disable-next-line
        console.log('Error call to action clicked');
    }
}