import { Component, Input } from '@angular/core';
import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "../../entity-files";
import * as i2 from "@angular/common";
import * as i3 from "../../file-dropper/file-dropper.component";
import * as i4 from "@angular/flex-layout/flex";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/material/button";
export class FileDragdropUploaderComponent {
    constructor(entityFileService) {
        this.entityFileService = entityFileService;
        this.fileList = [];
        this.label = 'Select File';
        this.disabled = false;
        this.selectedFiles = new FormControl();
        this.onChange = (value) => {
            this.fileList = value || [];
        };
        this.onTouched = () => { };
    }
    ngOnInit() {
        this.selectedFiles.valueChanges.subscribe((value) => {
            this.onChange(value);
            this.onTouched();
        });
    }
    writeValue(obj) {
        this.selectedFiles.setValue(obj);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    /**
     * Reset the form control value
     */
    resetField() {
        this.selectedFiles.setValue('');
    }
    onFileChanged(files) {
        files.forEach(async (file) => {
            const result = await this.entityFileService.uploadEntityFile(file);
            const index = this.fileList.findIndex((value) => value.name === file.name);
            if (index === -1) {
                const tempFile = { name: file.name, size: file.size, type: file.type, url: result?.item?.url };
                const reader = new FileReader();
                reader.onload = () => {
                    tempFile.is_temp_url = false;
                    tempFile.is_image = this.isImage(file);
                };
                reader.readAsDataURL(file);
                this.fileList.push(tempFile);
            }
        });
        this.selectedFiles.setValue(this.fileList);
    }
    isImage(file) {
        const type = file?.type || file?.mime_type;
        return type.includes('image');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileDragdropUploaderComponent, deps: [{ token: i1.EntityFileService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileDragdropUploaderComponent, selector: "app-file-dragdrop-uploader", inputs: { label: "label", fileDropperConfig: "fileDropperConfig" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: FileDragdropUploaderComponent
            }
        ], ngImport: i0, template: "<div class=\"w-100\">\n  <p *ngIf=\"label\"\n     class=\"mb-1 text-dark\">{{ label }}\n  <div class=\"mb-2\" fxLayout=\"column\" fxLayoutGap=\"5px\"\n       *ngIf=\"fileList && fileList.length > 0\">\n    <div *ngFor=\"let file of fileList; let i = index;\"\n         fxLayout fxLayoutAlign=\"start\" fxLayoutGap=\"5px\">\n      <img *ngIf=\"file?.is_image\" class=\"img-preview\" [src]=\"file?.url\" alt=\"\">\n      <div *ngIf=\"!file?.is_image\">\n        <mat-icon class=\"icon-preview text-secondary\">file_present</mat-icon>\n      </div>\n      <div>\n        <small class=\"mb-0\" *ngIf=\"file?.name\">{{ file?.name }}</small> <br>\n        <button mat-stroked-button color=\"warn\"\n                class=\"btn-sm\"\n                (click)=\"fileList.splice(i, 1)\">Remove</button>\n      </div>\n    </div>\n  </div>\n  <app-file-dropper *ngIf=\"!fileDropperConfig?.multiple && fileList?.length <= 0\"\n                    class=\"w-100\"\n                    [config]=\"fileDropperConfig\"\n                    (fileChanged)=\"onFileChanged($event)\"></app-file-dropper>\n</div>\n", styles: [":host ::ng-deep .img-preview{min-width:50px;max-width:50px;max-height:50px;min-height:50px}:host ::ng-deep .icon-preview{font-size:40px;height:40px;width:40px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "directive", type: i4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileDragdropUploaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-file-dragdrop-uploader', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: FileDragdropUploaderComponent
                        }
                    ], template: "<div class=\"w-100\">\n  <p *ngIf=\"label\"\n     class=\"mb-1 text-dark\">{{ label }}\n  <div class=\"mb-2\" fxLayout=\"column\" fxLayoutGap=\"5px\"\n       *ngIf=\"fileList && fileList.length > 0\">\n    <div *ngFor=\"let file of fileList; let i = index;\"\n         fxLayout fxLayoutAlign=\"start\" fxLayoutGap=\"5px\">\n      <img *ngIf=\"file?.is_image\" class=\"img-preview\" [src]=\"file?.url\" alt=\"\">\n      <div *ngIf=\"!file?.is_image\">\n        <mat-icon class=\"icon-preview text-secondary\">file_present</mat-icon>\n      </div>\n      <div>\n        <small class=\"mb-0\" *ngIf=\"file?.name\">{{ file?.name }}</small> <br>\n        <button mat-stroked-button color=\"warn\"\n                class=\"btn-sm\"\n                (click)=\"fileList.splice(i, 1)\">Remove</button>\n      </div>\n    </div>\n  </div>\n  <app-file-dropper *ngIf=\"!fileDropperConfig?.multiple && fileList?.length <= 0\"\n                    class=\"w-100\"\n                    [config]=\"fileDropperConfig\"\n                    (fileChanged)=\"onFileChanged($event)\"></app-file-dropper>\n</div>\n", styles: [":host ::ng-deep .img-preview{min-width:50px;max-width:50px;max-height:50px;min-height:50px}:host ::ng-deep .icon-preview{font-size:40px;height:40px;width:40px}\n"] }]
        }], ctorParameters: () => [{ type: i1.EntityFileService }], propDecorators: { label: [{
                type: Input
            }], fileDropperConfig: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 