import { BaseInputComponent } from 'first-npm-package-nicule/forms';
import { ControlContainer, NgForm } from '@angular/forms';
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';

@Component({
    templateUrl: 'file-field.component.html',
    styleUrls: ['../mat-field.scss', 'file-field.component.scss'],
    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
})
export class FileFieldComponent extends BaseInputComponent implements OnInit, AfterViewInit {

    @ViewChild('fileInput', { static: true }) fileInput;

    public fileIsLoading = false;

    get fieldInfo(): string {
        const fieldInfoKey = this.labelingService.label(this.field.name, this.form.name, 'fieldInfo');
        const translatedFieldInfo = this.translateService.instant(fieldInfoKey);

        return fieldInfoKey === translatedFieldInfo || translatedFieldInfo === 'fieldInfo' ? '' : translatedFieldInfo;
    }

    ngOnInit(): void {
        this.fileInput.nativeElement.addEventListener('dragover', evt => {
            evt.stopPropagation();
            evt.preventDefault();
            evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
        }, false);

        this.fileInput.nativeElement.addEventListener('drop', evt => {
            evt.stopPropagation();
            evt.preventDefault();
            if (evt.dataTransfer.files && evt.dataTransfer.files.length > 0) {
                const file = evt.dataTransfer.files[0];
                this.processFile(file);
            }
        }, false);
    }

    ngAfterViewInit(): void {
        if (this.field.value === null) {
            return;
        }

        const { fileName, contentType, fileContent} = this.field.value;

        if (fileName === '' && contentType === '' && fileContent === '') {
            this.field.value = null;
        }
    }

    onFileChange(event): void {
        if (event.target.files && event.target.files.length > 0) {
            const file = event.target.files[0];
            this.processFile(file);
        }
    }

    processFile(file): void {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
            this.ngModel.control.setValue({
                fileName: file.name,
                contentType: file.type,
                fileContent: reader.result.toString().split(',')[1]
            });
        };
    }

    removeFile(): void {
        this.ngModel.control.reset();
        this.fileInput.nativeElement.value = null;
    }
}