import {
    ChangeDetectionStrategy,
    Component,
    EventEmitter,
    Input,
    Output,
} from '@angular/core';

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

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'fulfilment-field-control-list-component',
    styleUrls: [
        './fulfilment-field-control-list.component.scss',
    ],
    templateUrl: './fulfilment-field-control-list.component.template.pug',
})
export class FulfilmentFieldControlListComponent {
    @Input()
    public fulfilmentFieldsAndImages:
        FulfilmentFieldControlComponentInterface[];
    @Input()
    public currency: string;
    @Input()
    public currentFieldName: string;
    @Input()
    public showPricing: boolean;
    @Input()
    public showDeleteButton: boolean;

    @Input()
    public mainSectionText = 'SELECT SIDE';
    @Input()
    public deleteButtonTooltipText: string;
    @Input()
    public replaceButtonTooltipText: string;
    @Input()
    public invertButtonTooltipText: string;
    @Input()
    public alignHorizontalButtonTooltipText: string;
    @Input()
    public alignVerticalButtonTooltipText: string;
    @Input()
    public resetButtonTooltipText: string;
    @Input()
    public uploadingText: string;
    @Input()
    public usePrintShopClass = false;

    @Output()
    public onDeleteClicked = new EventEmitter<string>();
    @Output()
    public onReplaceImage = new EventEmitter<[File[], string]>();
    @Output()
    public onReplaceUploadFilesError = new EventEmitter<string>();
    @Output()
    public onInvertClicked = new EventEmitter<string>();
    @Output()
    public onAlignHorizontalClicked = new EventEmitter<string>();
    @Output()
    public onAlignVerticalClicked = new EventEmitter<string>();
    @Output()
    public onResetClicked = new EventEmitter<string>();
    @Output()
    public onSectionClicked = new EventEmitter<string>();
    @Output()
    public onToggleEditToolsMenu = new EventEmitter<string>();

    public trackByFieldName(
        {
            fieldName,
        }: FulfilmentFieldControlComponentInterface,
    ) {
        return fieldName;
    }

    public getIsCurrentField(
        {
            fieldName,
        }: FulfilmentFieldControlComponentInterface,
    ) {
        return this.currentFieldName === fieldName;
    }

    public deleteClicked(
        {
            fieldName,
        }: FulfilmentFieldControlComponentInterface,
    ) {
        this.onDeleteClicked.emit(fieldName);
    }

    public replaceImage(
        images: File[],
        {
            fieldName,
        }: FulfilmentFieldControlComponentInterface,
    ) {
        this.onReplaceImage.emit([images, fieldName]);
    }

    public replaceUploadFilesError(
        {
            fieldName,
        }: FulfilmentFieldControlComponentInterface,
    ) {
        this.onReplaceUploadFilesError.emit(fieldName);
    }

    public invertClicked(
        {
            fieldName,
        }: FulfilmentFieldControlComponentInterface,
    ) {
        this.onInvertClicked.emit(fieldName);
    }

    public alignHorizontalClicked() {
        this.onAlignHorizontalClicked.emit();
    }

    public alignVerticalClicked() {
        this.onAlignVerticalClicked.emit();
    }

    public resetClicked() {
        this.onResetClicked.emit();
    }

    public sectionClicked(
        {
            fieldName,
        }: FulfilmentFieldControlComponentInterface,
    ) {
        this.onSectionClicked.emit(fieldName);
    }

    public toggleEditToolsMenu(
        {
            fieldName,
        }: FulfilmentFieldControlComponentInterface,
    ) {
        this.onToggleEditToolsMenu.emit(fieldName);
    }
}