import { Component, ViewChild, Inject, Output, EventEmitter } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/legacy-dialog";
import * as i2 from "../content-services/review-component-data.service";
import * as i3 from "@angular/common";
import * as i4 from "@angular/material/icon";
import * as i5 from "@angular/material/menu";
import * as i6 from "@angular/material/progress-spinner";
import * as i7 from "../../avatar-photo/avatar-photo.component";
import * as i8 from "../../rating-summary/rating-summary.component";
import * as i9 from "ngx-infinite-scroll";
import * as i10 from "@sunbird-cb/utils-v2";
import * as i11 from "@ngx-translate/core";
export class ReviewsContentComponent {
    constructor(dialogRef, reviewDataService, data) {
        this.dialogRef = dialogRef;
        this.reviewDataService = reviewDataService;
        this.data = data;
        this.initiateLoadMore = new EventEmitter();
        this.loadLatestReviews = new EventEmitter();
        this.clearIcon = false;
        this.disableLoadMore = false;
        this.reviews = [];
        this.showFilterIndicator = 'Top';
        this.displayLoader = false;
        this.reviewDataService.getReviewData().subscribe((_review) => {
            this.reviews = _review;
            this.data.reviews = _review;
        });
    }
    ngOnInit() {
        if (this.data && this.data.reviews) {
            this.reviews = Object.values(this.data.reviews);
        }
    }
    ngAfterViewInit() {
        fromEvent(this.searchInput.nativeElement, 'keyup')
            .pipe(
        // get value
        map((event) => {
            return event.target.value.trim();
        }), 
        // Time in milliseconds between key events
        debounceTime(150), 
        // If previous query is different from current
        distinctUntilChanged())
            // subscription for response
            .subscribe((text) => {
            this.clearIcon = (text.length) ? true : false;
            if (text) {
                this.reviews = Object.values(this.reviews).filter((_obj) => {
                    return _obj.review && _obj.review.toLowerCase().includes(text.toLowerCase())
                        || _obj.firstName && _obj.firstName.toLowerCase().includes(text.toLowerCase());
                });
            }
            else {
                this.reviews = Object.values(this.data.reviews);
            }
        });
    }
    handleCloseModal() {
        this.dialogRef.close();
    }
    handleFocus() {
        this.searchInput.nativeElement.focus();
    }
    handleClear() {
        this.clearIcon = false;
        this.searchInput.nativeElement.value = '';
        this.reviews = Object.values(this.data.reviews);
    }
    handleCapitalize(str, type) {
        let returnValue = '';
        if (str && type === 'name') {
            returnValue = str.split(' ').map(_str => {
                return _str.charAt(0).toUpperCase() + _str.slice(1);
            }).join(' ');
        }
        else {
            returnValue = str && (str.charAt(0).toUpperCase() + str.slice(1));
        }
        return returnValue;
    }
    handleReviewsFilter(str) {
        this.showFilterIndicator = str;
        this.loadLatestReviews.emit(str);
        this.handleClear();
    }
    handleLoadMore() {
        this.displayLoader = true;
        this.initiateLoadMore.emit(this.showFilterIndicator);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReviewsContentComponent, deps: [{ token: i1.MatLegacyDialogRef }, { token: i2.ReviewComponentDataService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ReviewsContentComponent, selector: "ws-widget-reviews-content", outputs: { initiateLoadMore: "initiateLoadMore", loadLatestReviews: "loadLatestReviews" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"rating-modal-container\">\n    <div class=\"flex flex-row ratings-container\">\n        <div class=\"flex-1\">\n            <ws-widget-rating-summary [ratingSummary]=\"data?.ratings\"></ws-widget-rating-summary>\n        </div>\n        <div class=\"flex\">\n            <mat-icon class=\"cursor-pointer\" (click)=\"handleCloseModal()\" >close</mat-icon>\n        </div>\n    </div>\n    <div class=\"flex flex-col p-6\">\n        <div class=\"flex flex-col gap-4\">\n            <div class=\"font-base font-bold\">\n                <span *ngIf=\"showFilterIndicator === 'Top'\" class=\"nodtranslate\">{{ 'apptocsinglepage.topReviews' | translate }}</span>\n                <span *ngIf=\"showFilterIndicator !== 'Top'\" class=\"nodtranslate\">{{ 'apptocsinglepage.latestReviews' | translate }}</span>\n            </div>\n            <div class=\"flex flex-row gap-3\">\n                <div class=\"flex-1\">\n                    <div class=\"flex flex-row search-div\">\n                        <mat-icon (click)=\"handleFocus()\" class=\"cursor-pointer\">search</mat-icon>\n                        <input #searchInput type=\"text\" class=\"search-input flex\" placeholder=\"Search\" maxlength=\"50\" />\n                        <ng-container *ngIf=\"clearIcon\">\n                            <mat-icon (click)=\"handleClear()\" class=\"cursor-pointer\">close</mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n                <div class=\"flex items-center justify-center w-8\">\n                    <mat-icon class=\"cursor-pointer\" [matMenuTriggerFor]=\"filter\">filter_list</mat-icon>\n                    <mat-menu #filter=\"matMenu\" xPosition=\"before\">\n                        <button mat-menu-item class=\"px-3\" [ngClass]=\"{'highlightFilter': showFilterIndicator === 'Latest'}\"\n                            (click)=\"handleReviewsFilter('Latest')\">\n                            <span class=\"nodtranslate\">{{ 'apptocsinglepage.latestReviews' | translate }}</span>\n                        </button>\n                        <button mat-menu-item class=\"px-3\" [ngClass]=\"{'highlightFilter': showFilterIndicator === 'Top'}\"\n                            (click)=\"handleReviewsFilter('Top')\">\n                            <span class=\"nodtranslate\">{{ 'apptocsinglepage.topReviews' | translate }}</span>\n                        </button>\n                    </mat-menu>\n                </div>\n            </div>\n        </div>\n        <ng-container *ngIf=\"!reviews || !reviews.length\">\n            <div class=\"flex justify-center items-center no-reviews-found text-lg\">\n                <div class=\"p-4 nodtranslate\">\n                    {{ 'apptocsinglepage.noReviewsFound' | translate }}\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"reviews?.length\">\n            <div class=\"flex flex-col reviews\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"150\" [infiniteScrollContainer]=\"'.reviews'\" [fromRoot]=\"true\" [scrollWindow]=\"false\" (scrolled)=\"handleLoadMore()\">\n                <ng-container *ngFor=\"let eachReview of reviews; let i = index\">\n                    <div class=\"flex flex-row gap-3 p-4\">\n                        <div class=\"flex-1\">\n                            <div class=\"flex flex-col gap-4\">\n                                <div class=\"flex flex-row gap-2\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"flex text-sm nodtranslate\">{{ handleCapitalize(eachReview?.review, 'comment') }}</div>\n                                    </div>\n                                    <div class=\"flex flex-row gap-1 rating-start-value\">\n                                        <mat-icon>star</mat-icon>\n                                        <div class=\"text-sm nodtranslate\">{{ eachReview?.rating }}</div>\n                                    </div>\n                                </div>\n                                <div class=\"flex flex-row gap-2 items-center\">\n                                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\" [photoUrl]=\"eachReview?.photo || ''\" [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n                                    <div class=\"flex flex-wrap\">\n                                        <div class=\"text-sm nodtranslate\">{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n                                        <div class=\"flex items-center mx-2\">\n                                            <span class=\"period\"></span>\n                                        </div>\n                                        <div class=\"text-sm nodtranslate\" *ngIf=\"eachReview?.date\">{{ eachReview?.date | pipeRelativeTime }}</div>\n                                        <div class=\"text-sm nodtranslate\" *ngIf=\"eachReview?.updatedon\">{{ eachReview?.updatedon | pipeRelativeTime }}</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"separator\" *ngIf=\"reviews.length > (i + 1)\" ></div>\n                </ng-container>\n                <div *ngIf=\"displayLoader\" class=\"flex items-center justify-center mt-6\">\n                    <mat-spinner [diameter]=\"30\"></mat-spinner>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n    \n</div>\n\n", styles: [".search-div{border:1px solid rgba(0,0,0,.16);border-radius:4px;background:#fff}.search-div .mat-icon{padding:8px}.search-div .search-input{padding:8px 0;border:none;border-radius:8px;width:100%;font-family:Lato}.search-div .search-input:focus{outline:none}.search-div .search-input:focus-visible{outline:none!important}.ratings-container{padding:24px;background-color:#1b4ca114}.separator{border-bottom:2px solid rgba(0,0,0,.1)}.reviews{max-height:320px;overflow-y:auto}.rating-start-value mat-icon{color:#ff9800}::ng-deep .mat-menu-panel{min-width:12em!important;padding:8px 0!important;border-radius:12px;margin-top:4px}::ng-deep .mat-menu-panel .mat-menu-content{padding-top:0!important}::ng-deep .mat-menu-panel .mat-menu-content button{padding:0 16px!important}.no-reviews-found{background-color:#fff;margin-top:16px;border-radius:8px;border:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i7.AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: i8.RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "directive", type: i9.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i10.PipeRelativeTimePipe, name: "pipeRelativeTime" }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReviewsContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-widget-reviews-content', template: "<div class=\"rating-modal-container\">\n    <div class=\"flex flex-row ratings-container\">\n        <div class=\"flex-1\">\n            <ws-widget-rating-summary [ratingSummary]=\"data?.ratings\"></ws-widget-rating-summary>\n        </div>\n        <div class=\"flex\">\n            <mat-icon class=\"cursor-pointer\" (click)=\"handleCloseModal()\" >close</mat-icon>\n        </div>\n    </div>\n    <div class=\"flex flex-col p-6\">\n        <div class=\"flex flex-col gap-4\">\n            <div class=\"font-base font-bold\">\n                <span *ngIf=\"showFilterIndicator === 'Top'\" class=\"nodtranslate\">{{ 'apptocsinglepage.topReviews' | translate }}</span>\n                <span *ngIf=\"showFilterIndicator !== 'Top'\" class=\"nodtranslate\">{{ 'apptocsinglepage.latestReviews' | translate }}</span>\n            </div>\n            <div class=\"flex flex-row gap-3\">\n                <div class=\"flex-1\">\n                    <div class=\"flex flex-row search-div\">\n                        <mat-icon (click)=\"handleFocus()\" class=\"cursor-pointer\">search</mat-icon>\n                        <input #searchInput type=\"text\" class=\"search-input flex\" placeholder=\"Search\" maxlength=\"50\" />\n                        <ng-container *ngIf=\"clearIcon\">\n                            <mat-icon (click)=\"handleClear()\" class=\"cursor-pointer\">close</mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n                <div class=\"flex items-center justify-center w-8\">\n                    <mat-icon class=\"cursor-pointer\" [matMenuTriggerFor]=\"filter\">filter_list</mat-icon>\n                    <mat-menu #filter=\"matMenu\" xPosition=\"before\">\n                        <button mat-menu-item class=\"px-3\" [ngClass]=\"{'highlightFilter': showFilterIndicator === 'Latest'}\"\n                            (click)=\"handleReviewsFilter('Latest')\">\n                            <span class=\"nodtranslate\">{{ 'apptocsinglepage.latestReviews' | translate }}</span>\n                        </button>\n                        <button mat-menu-item class=\"px-3\" [ngClass]=\"{'highlightFilter': showFilterIndicator === 'Top'}\"\n                            (click)=\"handleReviewsFilter('Top')\">\n                            <span class=\"nodtranslate\">{{ 'apptocsinglepage.topReviews' | translate }}</span>\n                        </button>\n                    </mat-menu>\n                </div>\n            </div>\n        </div>\n        <ng-container *ngIf=\"!reviews || !reviews.length\">\n            <div class=\"flex justify-center items-center no-reviews-found text-lg\">\n                <div class=\"p-4 nodtranslate\">\n                    {{ 'apptocsinglepage.noReviewsFound' | translate }}\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"reviews?.length\">\n            <div class=\"flex flex-col reviews\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"150\" [infiniteScrollContainer]=\"'.reviews'\" [fromRoot]=\"true\" [scrollWindow]=\"false\" (scrolled)=\"handleLoadMore()\">\n                <ng-container *ngFor=\"let eachReview of reviews; let i = index\">\n                    <div class=\"flex flex-row gap-3 p-4\">\n                        <div class=\"flex-1\">\n                            <div class=\"flex flex-col gap-4\">\n                                <div class=\"flex flex-row gap-2\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"flex text-sm nodtranslate\">{{ handleCapitalize(eachReview?.review, 'comment') }}</div>\n                                    </div>\n                                    <div class=\"flex flex-row gap-1 rating-start-value\">\n                                        <mat-icon>star</mat-icon>\n                                        <div class=\"text-sm nodtranslate\">{{ eachReview?.rating }}</div>\n                                    </div>\n                                </div>\n                                <div class=\"flex flex-row gap-2 items-center\">\n                                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\" [photoUrl]=\"eachReview?.photo || ''\" [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n                                    <div class=\"flex flex-wrap\">\n                                        <div class=\"text-sm nodtranslate\">{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n                                        <div class=\"flex items-center mx-2\">\n                                            <span class=\"period\"></span>\n                                        </div>\n                                        <div class=\"text-sm nodtranslate\" *ngIf=\"eachReview?.date\">{{ eachReview?.date | pipeRelativeTime }}</div>\n                                        <div class=\"text-sm nodtranslate\" *ngIf=\"eachReview?.updatedon\">{{ eachReview?.updatedon | pipeRelativeTime }}</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"separator\" *ngIf=\"reviews.length > (i + 1)\" ></div>\n                </ng-container>\n                <div *ngIf=\"displayLoader\" class=\"flex items-center justify-center mt-6\">\n                    <mat-spinner [diameter]=\"30\"></mat-spinner>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n    \n</div>\n\n", styles: [".search-div{border:1px solid rgba(0,0,0,.16);border-radius:4px;background:#fff}.search-div .mat-icon{padding:8px}.search-div .search-input{padding:8px 0;border:none;border-radius:8px;width:100%;font-family:Lato}.search-div .search-input:focus{outline:none}.search-div .search-input:focus-visible{outline:none!important}.ratings-container{padding:24px;background-color:#1b4ca114}.separator{border-bottom:2px solid rgba(0,0,0,.1)}.reviews{max-height:320px;overflow-y:auto}.rating-start-value mat-icon{color:#ff9800}::ng-deep .mat-menu-panel{min-width:12em!important;padding:8px 0!important;border-radius:12px;margin-top:4px}::ng-deep .mat-menu-panel .mat-menu-content{padding-top:0!important}::ng-deep .mat-menu-panel .mat-menu-content button{padding:0 16px!important}.no-reviews-found{background-color:#fff;margin-top:16px;border-radius:8px;border:none}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.MatLegacyDialogRef }, { type: i2.ReviewComponentDataService }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }]; }, propDecorators: { searchInput: [{
                type: ViewChild,
                args: ['searchInput', { static: true }]
            }], initiateLoadMore: [{
                type: Output
            }], loadLatestReviews: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 