import { Component, DestroyRef, EventEmitter, inject, Input, Output } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TranslatePipe } from '@ngx-translate/core';
import { CheckboxListComponent } from '@seniorsistemas/angular-components/checkbox-list';
import { isNullOrUndefined } from '@seniorsistemas/angular-components/utils';
import { ThumbnailItemImageComponent } from './components/thumbnail-item-image/thumbnail-item-image.component';
import { ThumbnailItemVideoComponent } from './components/thumbnail-item-video/thumbnail-item-video.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class ThumbnailItemComponent {
    _destroyRef = inject(DestroyRef);
    itemData;
    isCheckable = true;
    isChecked = false;
    combineCheckboxEvent = true;
    checked = new EventEmitter();
    opened = new EventEmitter();
    checkboxFormGroup = new FormGroup({});
    ngOnInit() {
        this._validateItemData();
        this._createFormGroup();
    }
    onClick() {
        this.opened.emit(this.itemData);
    }
    checkboxClick(event) {
        if (this.combineCheckboxEvent) {
            return;
        }
        event.stopPropagation();
    }
    _createFormGroup() {
        this.checkboxFormGroup = new FormGroup({
            checkbox: new FormControl({ checked: this.isChecked }),
        });
        this.checkboxFormGroup
            .get('checkbox')
            ?.valueChanges.pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe((value) => {
            this.checked.emit({ item: this.itemData, selected: value.checked });
        });
    }
    _validateItemData() {
        if (isNullOrUndefined(this.itemData)) {
            throw new Error('itemData is required');
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ThumbnailItemComponent, isStandalone: true, selector: "s-thumbnail-item", inputs: { itemData: "itemData", isCheckable: "isCheckable", isChecked: "isChecked", combineCheckboxEvent: "combineCheckboxEvent" }, outputs: { checked: "checked", opened: "opened" }, ngImport: i0, template: "@if (itemData) {\r\n    <button\r\n        class=\"thumbnail-item\"\r\n        (click)=\"onClick()\"\r\n    >\r\n        <div class=\"thumbnail-item-content\">\r\n            <div class=\"content\">\r\n                @if (itemData.type === 'video') {\r\n                    <s-thumbnail-item-video\r\n                        [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\r\n                        [videoUrl]=\"itemData.videoUrl ? itemData.videoUrl : ''\"\r\n                    >\r\n                    </s-thumbnail-item-video>\r\n                }\r\n                @if (itemData.type === 'image') {\r\n                    <s-thumbnail-item-image\r\n                        [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\r\n                    ></s-thumbnail-item-image>\r\n                }\r\n                @if (itemData.type === 'audio') {\r\n                    <i class=\"icon fas fa-volume-down\"></i>\r\n                    <span class=\"label\">{{ 'platform.angular_components.listen' | translate }}</span>\r\n                }\r\n                @if (itemData.type === 'file') {\r\n                    <i class=\"icon fas fa-file-alt\"></i>\r\n                    <span class=\"label\">{{ 'platform.angular_components.view' | translate }}</span>\r\n                }\r\n            </div>\r\n            @if (isCheckable) {\r\n                <form\r\n                    [formGroup]=\"checkboxFormGroup\"\r\n                    class=\"checkbox\"\r\n                >\r\n                    <s-checkbox-list\r\n                        [data]=\"{ label: '' }\"\r\n                        formControlName=\"checkbox\"\r\n                        (click)=\"checkboxClick($event)\"\r\n                    ></s-checkbox-list>\r\n                </form>\r\n            }\r\n        </div>\r\n        <span class=\"file-name-label\">{{ itemData.fileName }}</span>\r\n    </button>\r\n}\r\n", styles: [".thumbnail-item{align-items:center;background:transparent;border:none;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;width:100px}.thumbnail-item-content{align-items:center;background-image:linear-gradient(to top right,#5288b6,#00c89a);border-radius:8px;display:flex;flex-direction:column;height:100px;justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:100%;overflow:hidden}.thumbnail-item-content .checkbox{position:absolute;right:8px;top:8px}.thumbnail-item-content .content{align-items:center;color:#fff;display:flex;flex-direction:column;gap:4px;overflow:hidden;width:100%}.thumbnail-item-content .content .icon{font-size:24px}.thumbnail-item-content .content .label{font-size:12px;width:100%;padding:0 8px;overflow:hidden;text-overflow:ellipsis}.thumbnail-item:hover{transform:scale(1.05);transition:all .2s ease-in-out}.thumbnail-item .file-name-label{color:#525966;font-family:Open Sans,sans-serif;font-size:12px;overflow:hidden;text-align:center;text-overflow:ellipsis;text-wrap:nowrap;-webkit-user-select:none;user-select:none;width:100%}\n"], dependencies: [{ kind: "component", type: ThumbnailItemVideoComponent, selector: "s-thumbnail-item-video", inputs: ["imageUrl", "videoUrl"] }, { kind: "component", type: ThumbnailItemImageComponent, selector: "s-thumbnail-item-image", inputs: ["imageUrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CheckboxListComponent, selector: "s-checkbox-list", inputs: ["data"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-thumbnail-item', standalone: true, imports: [
                        ThumbnailItemVideoComponent,
                        ThumbnailItemImageComponent,
                        FormsModule,
                        ReactiveFormsModule,
                        CheckboxListComponent,
                        TranslatePipe,
                    ], template: "@if (itemData) {\r\n    <button\r\n        class=\"thumbnail-item\"\r\n        (click)=\"onClick()\"\r\n    >\r\n        <div class=\"thumbnail-item-content\">\r\n            <div class=\"content\">\r\n                @if (itemData.type === 'video') {\r\n                    <s-thumbnail-item-video\r\n                        [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\r\n                        [videoUrl]=\"itemData.videoUrl ? itemData.videoUrl : ''\"\r\n                    >\r\n                    </s-thumbnail-item-video>\r\n                }\r\n                @if (itemData.type === 'image') {\r\n                    <s-thumbnail-item-image\r\n                        [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\r\n                    ></s-thumbnail-item-image>\r\n                }\r\n                @if (itemData.type === 'audio') {\r\n                    <i class=\"icon fas fa-volume-down\"></i>\r\n                    <span class=\"label\">{{ 'platform.angular_components.listen' | translate }}</span>\r\n                }\r\n                @if (itemData.type === 'file') {\r\n                    <i class=\"icon fas fa-file-alt\"></i>\r\n                    <span class=\"label\">{{ 'platform.angular_components.view' | translate }}</span>\r\n                }\r\n            </div>\r\n            @if (isCheckable) {\r\n                <form\r\n                    [formGroup]=\"checkboxFormGroup\"\r\n                    class=\"checkbox\"\r\n                >\r\n                    <s-checkbox-list\r\n                        [data]=\"{ label: '' }\"\r\n                        formControlName=\"checkbox\"\r\n                        (click)=\"checkboxClick($event)\"\r\n                    ></s-checkbox-list>\r\n                </form>\r\n            }\r\n        </div>\r\n        <span class=\"file-name-label\">{{ itemData.fileName }}</span>\r\n    </button>\r\n}\r\n", styles: [".thumbnail-item{align-items:center;background:transparent;border:none;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;width:100px}.thumbnail-item-content{align-items:center;background-image:linear-gradient(to top right,#5288b6,#00c89a);border-radius:8px;display:flex;flex-direction:column;height:100px;justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:100%;overflow:hidden}.thumbnail-item-content .checkbox{position:absolute;right:8px;top:8px}.thumbnail-item-content .content{align-items:center;color:#fff;display:flex;flex-direction:column;gap:4px;overflow:hidden;width:100%}.thumbnail-item-content .content .icon{font-size:24px}.thumbnail-item-content .content .label{font-size:12px;width:100%;padding:0 8px;overflow:hidden;text-overflow:ellipsis}.thumbnail-item:hover{transform:scale(1.05);transition:all .2s ease-in-out}.thumbnail-item .file-name-label{color:#525966;font-family:Open Sans,sans-serif;font-size:12px;overflow:hidden;text-align:center;text-overflow:ellipsis;text-wrap:nowrap;-webkit-user-select:none;user-select:none;width:100%}\n"] }]
        }], propDecorators: { itemData: [{
                type: Input
            }], isCheckable: [{
                type: Input
            }], isChecked: [{
                type: Input
            }], combineCheckboxEvent: [{
                type: Input
            }], checked: [{
                type: Output
            }], opened: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 