import { Component, ElementRef, Input } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { OverlayService } from '@aztrix/components/overlay';
import { EnvironmentService } from '@aztrix/environment';
import { BehaviorSubject } from 'rxjs';
import { debounceTime, map, shareReplay, switchMap, tap } from 'rxjs/operators';
import { FeedbackFormComponent } from '../feedback-form/feedback-form.component';
import { FeedbackService } from '../feedback.service';
import * as i0 from "@angular/core";
import * as i1 from "../feedback.service";
import * as i2 from "@aztrix/components/overlay";
import * as i3 from "@aztrix/environment";
import * as i4 from "@angular/common";
import * as i5 from "@aztrix/icons";
import * as i6 from "@angular/material/form-field";
import * as i7 from "@angular/material/input";
import * as i8 from "@angular/forms";
import * as i9 from "@aztrix/components/spinner";
import * as i10 from "@aztrix/translate";
import * as i11 from "./icon-for-jira-request-type.pipe";
export class FeedbackSearchComponent {
    constructor(_elementRef, _feedback, _overlayService, _environment) {
        this._elementRef = _elementRef;
        this._feedback = _feedback;
        this._overlayService = _overlayService;
        this._environment = _environment;
        this.initValue = '';
        this.emailOptions = [];
        this.loadingResults$ = new BehaviorSubject(true);
        this.loadingRequestTypes$ = new BehaviorSubject(true);
        this.searchForm = new UntypedFormControl('');
        this.keyup$ = new BehaviorSubject('');
        this.searchResults$ = this.keyup$.pipe(debounceTime(500), tap(() => this.loadingResults$.next(true)), switchMap((search) => this._feedback.searchKnowledgeBase(search || 'how to').pipe(map((results) => results.articles.map((article) => {
            // eslint-disable-next-line max-len
            article.contentUrl = `https://aztrix.atlassian.net/servicedesk/customer/kb/view/${article.id}`;
            return article;
        })))), tap(() => this.loadingResults$.next(false)), shareReplay(1));
        this.requestTypes$ = this._feedback.searchKnowledgeBase('').pipe(map((results) => results.requestTypes), tap(() => this.loadingRequestTypes$.next(false)));
        this.portalUrl$ = this._environment
            .string$('JIRA_SERVICE_PORTAL_ID')
            .pipe(map((id) => `https://aztrix.atlassian.net/servicedesk/customer/portal/${id}`));
    }
    ngOnInit() {
        if (this.initValue !== '') {
            this.searchForm.setValue(this.initValue);
            this.keyup$.next(this.searchForm.value);
        }
    }
    openFeedbackModal(requestType) {
        this._overlayService.closeModal();
        this._overlayService.createModal(this._elementRef, FeedbackFormComponent, {
            title: requestType.name,
            init: (modal) => {
                modal.requestType = requestType;
                modal.emailOptions = this.emailOptions;
            },
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FeedbackSearchComponent, deps: [{ token: i0.ElementRef }, { token: i1.FeedbackService }, { token: i2.OverlayService }, { token: i3.EnvironmentService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FeedbackSearchComponent, selector: "ax-feedback-search", inputs: { initValue: "initValue", emailOptions: "emailOptions" }, ngImport: i0, template: "<div class=\"ax-modal-body-content c-modal__section\">\n  <mat-form-field class=\"c-input\" appearance=\"outline\" style=\"width: 100%\">\n    <mat-label>{{ 'modal.feedback.results.placeholder' | translate }}</mat-label>\n    <input\n      matInput\n      type=\"text\"\n      autofocus=\"true\"\n      [formControl]=\"searchForm\"\n      (keyup)=\"keyup$.next(searchForm.value)\"\n    />\n  </mat-form-field>\n  <div class=\"search-results\">\n    <ax-spinner class=\"results-loading\" *ngIf=\"loadingResults$ | async\"></ax-spinner>\n    <p *ngIf=\"!(searchResults$ | async)?.length && (loadingResults$ | async) === false\">\n      {{ 'modal.feedback.results.empty' | translate }}\n    </p>\n    <ng-container *ngIf=\"(loadingResults$ | async) === false\">\n      <a\n        class=\"search-link\"\n        *ngFor=\"let searchResult of searchResults$ | async\"\n        target=\"_blank\"\n        [href]=\"searchResult.contentUrl\"\n      >\n        <ax-icon class=\"icon\" name=\"text-box\"></ax-icon>\n        <span>{{ searchResult.title }}</span>\n      </a>\n    </ng-container>\n  </div>\n  <a class=\"portal-link\" [attr.href]=\"portalUrl$ | async\" target=\"_blank\">{{\n    'modal.feedback.articles' | translate | uppercase\n  }}</a>\n  <div class=\"contact-links\">\n    <h2>{{ 'modal.feedback.contact' | translate }}</h2>\n    <ax-spinner class=\"loading\" *ngIf=\"loadingRequestTypes$ | async\"></ax-spinner>\n    <div\n      *ngFor=\"let requestType of requestTypes$ | async\"\n      class=\"search-link\"\n      (click)=\"openFeedbackModal(requestType)\"\n    >\n      <ax-icon class=\"icon\" [name]=\"requestType | iconForJiraRequestType\"></ax-icon>\n      <span>{{ requestType.name }}</span>\n    </div>\n  </div>\n</div>\n", styles: [".search-link{color:#000;width:100%;display:flex;align-items:center;line-height:2rem;cursor:pointer}.search-link .icon{color:var(--primary-color-500)}.search-link span{margin-left:1rem}.c-modal__section{padding:1rem}.results-loading{height:150px;justify-content:center}h2{font-size:1.125rem}.portal-link{display:block;margin-bottom:1rem;color:var(--primary-color-500);font-weight:700}.contact-links{padding-top:1rem}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i9.SpinnerComponent, selector: "ax-spinner" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i11.IconForJiraRequestTypePipe, name: "iconForJiraRequestType" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FeedbackSearchComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-feedback-search', template: "<div class=\"ax-modal-body-content c-modal__section\">\n  <mat-form-field class=\"c-input\" appearance=\"outline\" style=\"width: 100%\">\n    <mat-label>{{ 'modal.feedback.results.placeholder' | translate }}</mat-label>\n    <input\n      matInput\n      type=\"text\"\n      autofocus=\"true\"\n      [formControl]=\"searchForm\"\n      (keyup)=\"keyup$.next(searchForm.value)\"\n    />\n  </mat-form-field>\n  <div class=\"search-results\">\n    <ax-spinner class=\"results-loading\" *ngIf=\"loadingResults$ | async\"></ax-spinner>\n    <p *ngIf=\"!(searchResults$ | async)?.length && (loadingResults$ | async) === false\">\n      {{ 'modal.feedback.results.empty' | translate }}\n    </p>\n    <ng-container *ngIf=\"(loadingResults$ | async) === false\">\n      <a\n        class=\"search-link\"\n        *ngFor=\"let searchResult of searchResults$ | async\"\n        target=\"_blank\"\n        [href]=\"searchResult.contentUrl\"\n      >\n        <ax-icon class=\"icon\" name=\"text-box\"></ax-icon>\n        <span>{{ searchResult.title }}</span>\n      </a>\n    </ng-container>\n  </div>\n  <a class=\"portal-link\" [attr.href]=\"portalUrl$ | async\" target=\"_blank\">{{\n    'modal.feedback.articles' | translate | uppercase\n  }}</a>\n  <div class=\"contact-links\">\n    <h2>{{ 'modal.feedback.contact' | translate }}</h2>\n    <ax-spinner class=\"loading\" *ngIf=\"loadingRequestTypes$ | async\"></ax-spinner>\n    <div\n      *ngFor=\"let requestType of requestTypes$ | async\"\n      class=\"search-link\"\n      (click)=\"openFeedbackModal(requestType)\"\n    >\n      <ax-icon class=\"icon\" [name]=\"requestType | iconForJiraRequestType\"></ax-icon>\n      <span>{{ requestType.name }}</span>\n    </div>\n  </div>\n</div>\n", styles: [".search-link{color:#000;width:100%;display:flex;align-items:center;line-height:2rem;cursor:pointer}.search-link .icon{color:var(--primary-color-500)}.search-link span{margin-left:1rem}.c-modal__section{padding:1rem}.results-loading{height:150px;justify-content:center}h2{font-size:1.125rem}.portal-link{display:block;margin-bottom:1rem;color:var(--primary-color-500);font-weight:700}.contact-links{padding-top:1rem}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FeedbackService }, { type: i2.OverlayService }, { type: i3.EnvironmentService }], propDecorators: { initValue: [{
                type: Input
            }], emailOptions: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 