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

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    selector: 'fulfilment-field-control-component',
    styleUrls: [
        './fulfilment-field-control.component.scss',
    ],
    templateUrl: './fulfilment-field-control.component.template.pug',
})
export class FulfilmentFieldControlComponent {
    @Input()
    public fulfilmentFieldName: string;
    @Input()
    public fulfilmentFieldImageUrl: string;
    @Input()
    public fulfilmentFieldAdditionalCost: number;
    @Input()
    public isCurrentField: boolean;
    @Input()
    public currency = 'GBP';
    @Input()
    public showPricing = true;
    @Input()
    public showDeleteButton = true;
    @Input()
    public isUploading = false;
    @Input()
    public uploadProgress = 0;
    @Input()
    public editToolsMenuOpen = false;
    @Input()
    public usePrintShopClass = false;
    @Input()
    public isProductEditable = true;

    @Input()
    public deleteButtonTooltipText = 'Delete';
    @Input()
    public replaceButtonTooltipText = 'Replace';
    @Input()
    public invertButtonTooltipText = 'Invert';
    @Input()
    public alignHorizontalButtonTooltipText = 'Align horizontally';
    @Input()
    public alignVerticalButtonTooltipText = 'Align vertically';
    @Input()
    public resetButtonTooltipText = 'Reset';
    @Input()
    public uploadingText = 'Uploading';

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

    public get isClosed() {
        return !this.fulfilmentFieldImageUrl;
    }

    public get backgroundImage() {
        return !this.isUploading
            ? 'url(' + this.fulfilmentFieldImageUrl + ')'
            : null;
    }

    public showAdditionalCost() {
        return this.isClosed && this.showPricing;
    }

    public deleteClicked() {
        this.onDeleteClicked.emit();
    }

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

    public replaceUploadFilesError() {
        this.onReplaceUploadFilesError.emit();
    }

    public invertClicked() {
        this.onInvertClicked.emit();
    }

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

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

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

    public sectionClicked() {
        this.onSectionClicked.emit();
    }

    public stopEventPropagation(event: Event) {
        event.stopPropagation();
    }

    public closeEditToolsMenu() {
        this.onToggleEditToolsMenu.emit(false);
    }

    public toggleEditToolsMenu() {
        this.onToggleEditToolsMenu.emit(!this.editToolsMenuOpen);
    }
}