import { Component, Input } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ActionFinishedComponent } from '@aztrix/components/action-finished';
import { OverlayService } from '@aztrix/components/overlay';
import { CustomValidators, PropertyFormControl, TranslateService } from '@aztrix/helpers';
import { PropertyType } from '@aztrix/models';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { FeedbackService } from '../feedback.service';
import * as i0 from "@angular/core";
import * as i1 from "../feedback.service";
import * as i2 from "@aztrix/helpers";
import * as i3 from "@aztrix/components/overlay";
import * as i4 from "@angular/common";
import * as i5 from "@aztrix/icons";
import * as i6 from "@angular/material/legacy-form-field";
import * as i7 from "@angular/material/legacy-input";
import * as i8 from "@angular/forms";
import * as i9 from "@aztrix/components/property-select";
import * as i10 from "@aztrix/components/value-edit";
import * as i11 from "@aztrix/components/spinner";
import * as i12 from "@aztrix/components/button";
export class FeedbackFormComponent {
    constructor(_feedback, _translate, _overlayService) {
        this._feedback = _feedback;
        this._translate = _translate;
        this._overlayService = _overlayService;
        this.emailOptions = [];
        this.feedbackForm = new FormGroup({});
    }
    ngOnChanges(changes) {
        if (changes.requestType && this.requestType) {
            this._createFeedbackForm(this.requestType);
        }
    }
    selectImage(event) {
        this._attachment = event.target.files[0];
        this.feedbackForm.get('attachment').setValue(this._attachment.name);
    }
    submitFeedback() {
        if (this.feedbackForm.valid) {
            this.feedbackForm.disable();
            const { summary, email, description } = this.feedbackForm.value;
            let title = summary;
            if (this.reportedProfile) {
                title = `${summary} // profileId: ${this.reportedProfile.id}`;
            }
            this._feedback
                .submit(this.requestType.id, title, email.value, description, this._attachment)
                .pipe(catchError((error) => {
                this.feedbackForm.enable();
                return throwError(() => error);
            }))
                .subscribe(() => {
                this._overlayService.closeModal();
                this._overlayService.createModal(ActionFinishedComponent, {
                    title: 'modal.report.submit.success',
                    init: (modal) => {
                        modal.bodyExplanation = this._translate.instant('modal.report.submit.description');
                        modal.didClickButton.subscribe(() => this._overlayService.closeModal());
                    },
                });
            });
        }
    }
    get loading() {
        return !Object.values(this.feedbackForm.controls)?.length;
    }
    _createFeedbackForm(requestType) {
        for (const field of requestType.fields) {
            switch (field.id) {
                case 'summary':
                    this.feedbackForm.addControl('summary', new FormControl('', [Validators.required, Validators.minLength(4)]));
                    break;
                case 'description':
                    this.feedbackForm.addControl('description', new FormControl('', [
                        Validators.required,
                        Validators.minLength(10),
                        Validators.maxLength(2000),
                    ]));
                    break;
                case 'email':
                    this.feedbackForm.addControl('email', PropertyFormControl.createByType(PropertyType.EMAIL, [
                        CustomValidators.propertyRequired,
                    ]));
                    break;
                case 'attachment':
                    this.feedbackForm.addControl('attachment', new FormControl({ value: null, disabled: true }));
                    break;
            }
        }
    }
}
FeedbackFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: FeedbackFormComponent, deps: [{ token: i1.FeedbackService }, { token: i2.TranslateService }, { token: i3.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
FeedbackFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: FeedbackFormComponent, selector: "ax-feedback-form", inputs: { emailOptions: "emailOptions", requestType: "requestType", reportedProfile: "reportedProfile" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field *ngIf=\"reportedProfile\" class=\"c-input\" appearance=\"outline\">\n  <mat-label>{{ 'label.profile' | translate }}</mat-label>\n  <input type=\"text\" matInput [disabled]=\"true\" [value]=\"reportedProfile | displayName\" />\n</mat-form-field>\n<ax-spinner *ngIf=\"loading\"></ax-spinner>\n<mat-form-field *ngIf=\"feedbackForm.get('summary')\" class=\"c-input\" appearance=\"outline\">\n  <mat-label>{{ 'label.title' | translate }}</mat-label>\n  <input type=\"text\" matInput [formControl]=\"feedbackForm.get('summary')\" [required]=\"true\" />\n  <mat-error>\n    <ax-icon name=\"alert-circle\"></ax-icon>\n    {{ 'modal.feedback.required' | translate }}\n  </mat-error>\n</mat-form-field>\n<mat-form-field *ngIf=\"feedbackForm.get('description')\" class=\"c-input\" appearance=\"outline\">\n  <mat-label>{{ 'modal.feedback.provide.description' | translate }}</mat-label>\n  <textarea\n    rows=\"4\"\n    [placeholder]=\"\"\n    type=\"text\"\n    matInput\n    [formControl]=\"feedbackForm.get('description')\"\n  ></textarea>\n  <mat-error>\n    <ax-icon name=\"alert-circle\"></ax-icon>\n    {{ 'modal.feedback.description.length' | translate }}\n  </mat-error>\n</mat-form-field>\n<mat-form-field *ngIf=\"feedbackForm.get('attachment')\" class=\"c-input\" appearance=\"outline\">\n  <input\n    matInput\n    type=\"text\"\n    [placeholder]=\"'modal.bug.attachment' | translate\"\n    (click)=\"uploadBtn.click()\"\n    [formControl]=\"feedbackForm.get('attachment')\"\n  />\n  <button\n    axButton\n    matSuffix\n    icon-button\n    (click)=\"\n      feedbackForm.get('attachment').value\n        ? feedbackForm.get('attachment').reset()\n        : uploadBtn.click()\n    \"\n    class=\"attachment-button\"\n  >\n    <ax-icon\n      class=\"icon\"\n      [name]=\"feedbackForm.get('attachment').value ? 'close' : 'paperclip'\"\n    ></ax-icon>\n  </button>\n  <input\n    hidden\n    type=\"file\"\n    accept=\"image/jpeg, image/png\"\n    (change)=\"selectImage($event)\"\n    #uploadBtn\n  />\n</mat-form-field>\n\n<ng-container *ngIf=\"feedbackForm.get('email')\">\n  <ng-template #input>\n    <ax-value-edit\n      [form]=\"feedbackForm.get('email').get('value')\"\n      type=\"TEXT\"\n      [label]=\"'property.EMAIL.label' | translate\"\n      [required]=\"true\"\n    ></ax-value-edit>\n  </ng-template>\n  <ax-property-select\n    *ngIf=\"emailOptions?.length; else input\"\n    [form]=\"feedbackForm.get('email')\"\n    [options]=\"emailOptions\"\n    [error]=\"'modal.feedback.required' | translate\"\n    [required]=\"true\"\n  ></ax-property-select>\n</ng-container>\n\n<div class=\"h-button-wrapper\">\n  <button\n    axButton\n    (click)=\"submitFeedback()\"\n    filled\n    color=\"primary\"\n    [disabled]=\"feedbackForm.disabled || !feedbackForm.valid\"\n  >\n    {{ 'label.send' | translate }}\n  </button>\n</div>\n", styles: ["mat-form-field{width:100%}:host{display:block;padding:1rem}:host>*{padding:.5rem 0}:host>*:first-child{padding-top:0}:host>*:last-child{padding-bottom:0}.h-button-wrapper{text-align:right}.attachment-button{margin:.25rem 0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i6.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i9.PropertySelectComponent, selector: "ax-property-select", inputs: ["form", "options", "hint", "error", "required", "verifiedOnly", "noValuePlaceholder"] }, { kind: "component", type: i10.ValueEditComponent, selector: "ax-value-edit", inputs: ["type", "numberConfig"] }, { kind: "component", type: i11.SpinnerComponent, selector: "ax-spinner" }, { kind: "directive", type: i12.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DisplayNamePipe, name: "displayName" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: FeedbackFormComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-feedback-form', template: "<mat-form-field *ngIf=\"reportedProfile\" class=\"c-input\" appearance=\"outline\">\n  <mat-label>{{ 'label.profile' | translate }}</mat-label>\n  <input type=\"text\" matInput [disabled]=\"true\" [value]=\"reportedProfile | displayName\" />\n</mat-form-field>\n<ax-spinner *ngIf=\"loading\"></ax-spinner>\n<mat-form-field *ngIf=\"feedbackForm.get('summary')\" class=\"c-input\" appearance=\"outline\">\n  <mat-label>{{ 'label.title' | translate }}</mat-label>\n  <input type=\"text\" matInput [formControl]=\"feedbackForm.get('summary')\" [required]=\"true\" />\n  <mat-error>\n    <ax-icon name=\"alert-circle\"></ax-icon>\n    {{ 'modal.feedback.required' | translate }}\n  </mat-error>\n</mat-form-field>\n<mat-form-field *ngIf=\"feedbackForm.get('description')\" class=\"c-input\" appearance=\"outline\">\n  <mat-label>{{ 'modal.feedback.provide.description' | translate }}</mat-label>\n  <textarea\n    rows=\"4\"\n    [placeholder]=\"\"\n    type=\"text\"\n    matInput\n    [formControl]=\"feedbackForm.get('description')\"\n  ></textarea>\n  <mat-error>\n    <ax-icon name=\"alert-circle\"></ax-icon>\n    {{ 'modal.feedback.description.length' | translate }}\n  </mat-error>\n</mat-form-field>\n<mat-form-field *ngIf=\"feedbackForm.get('attachment')\" class=\"c-input\" appearance=\"outline\">\n  <input\n    matInput\n    type=\"text\"\n    [placeholder]=\"'modal.bug.attachment' | translate\"\n    (click)=\"uploadBtn.click()\"\n    [formControl]=\"feedbackForm.get('attachment')\"\n  />\n  <button\n    axButton\n    matSuffix\n    icon-button\n    (click)=\"\n      feedbackForm.get('attachment').value\n        ? feedbackForm.get('attachment').reset()\n        : uploadBtn.click()\n    \"\n    class=\"attachment-button\"\n  >\n    <ax-icon\n      class=\"icon\"\n      [name]=\"feedbackForm.get('attachment').value ? 'close' : 'paperclip'\"\n    ></ax-icon>\n  </button>\n  <input\n    hidden\n    type=\"file\"\n    accept=\"image/jpeg, image/png\"\n    (change)=\"selectImage($event)\"\n    #uploadBtn\n  />\n</mat-form-field>\n\n<ng-container *ngIf=\"feedbackForm.get('email')\">\n  <ng-template #input>\n    <ax-value-edit\n      [form]=\"feedbackForm.get('email').get('value')\"\n      type=\"TEXT\"\n      [label]=\"'property.EMAIL.label' | translate\"\n      [required]=\"true\"\n    ></ax-value-edit>\n  </ng-template>\n  <ax-property-select\n    *ngIf=\"emailOptions?.length; else input\"\n    [form]=\"feedbackForm.get('email')\"\n    [options]=\"emailOptions\"\n    [error]=\"'modal.feedback.required' | translate\"\n    [required]=\"true\"\n  ></ax-property-select>\n</ng-container>\n\n<div class=\"h-button-wrapper\">\n  <button\n    axButton\n    (click)=\"submitFeedback()\"\n    filled\n    color=\"primary\"\n    [disabled]=\"feedbackForm.disabled || !feedbackForm.valid\"\n  >\n    {{ 'label.send' | translate }}\n  </button>\n</div>\n", styles: ["mat-form-field{width:100%}:host{display:block;padding:1rem}:host>*{padding:.5rem 0}:host>*:first-child{padding-top:0}:host>*:last-child{padding-bottom:0}.h-button-wrapper{text-align:right}.attachment-button{margin:.25rem 0}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.FeedbackService }, { type: i2.TranslateService }, { type: i3.OverlayService }]; }, propDecorators: { emailOptions: [{
                type: Input
            }], requestType: [{
                type: Input
            }], reportedProfile: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 