import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RatingModule } from 'primeng/rating';
import { ProgressBarModule } from 'primeng/progressbar';
import { SvgDividerComponent } from '../../../elements/svg-divider/svg-divider.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "../../../services/rest.service";
import * as i3 from "primeng/rating";
import * as i4 from "@angular/forms";
import * as i5 from "@angular/common";
import * as i6 from "primeng/progressbar";
export class CustomerReviewComponent {
    constructor(activatedRoute, restService) {
        this.activatedRoute = activatedRoute;
        this.restService = restService;
        this.productId = null;
        this.customerReviews = [];
        this.totalRating = 4;
        this.totalRatinsCount = 0;
        this.overallRatingCount = null;
    }
    ngOnInit() {
        this.activatedRoute.queryParams.subscribe((qParam) => {
            this.productId = qParam["id"];
            this.getAllReviews();
        });
    }
    getAllReviews() {
        if (!this.productId)
            return;
        this.restService.getAllReviews(this.productId).subscribe((response) => {
            this.customerReviews = response.data?.userReviews;
            this.totalRating = response.data?.averageRating;
            this.overallRatingCount = response.data?.overallRatingCount;
            this.totalRatinsCount = this.customerReviews?.length;
        });
    }
    getKeys(object) {
        if (!object)
            return [];
        return Object.keys(object);
    }
    getPercentage(value) {
        value = Number(value ?? '1');
        return (value / this.customerReviews?.length) * 100;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomerReviewComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.RestService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomerReviewComponent, isStandalone: true, selector: "simpo-customer-review", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", nextComponentColor: "nextComponentColor" }, ngImport: i0, template: "<section class=\"mainContainer\" style=\"gap: 20px;\" *ngIf=\"customerReviews.length\">\n    <div class=\"left-panel\">\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Customer Reviews</h3>\n        <p-rating [(ngModel)]=\"totalRating\" [cancel]=\"false\" [readonly]=\"true\" />\n        <div class=\"stars\">\n            <ng-container *ngFor=\"let rating of overallRatingCount | keyvalue; let idx = index\">\n                <div class=\"d-flex\" style=\"gap: 5px; margin: 10px 0px\">\n                    <div class=\"count\">{{rating.key}}</div>\n                    <div class=\"rating-bar\">\n                        <p-progressBar [value]=\"getPercentage(rating?.value)\"  [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [showValue]=\"false\" />\n                    </div>\n                    <div class=\"count\">{{getPercentage(rating?.value)}}%</div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n    <div class=\"right-panel\">\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Top Reviews</h3>\n        <div class=\"customer-reviews\">\n            <ng-container *ngFor=\"let review of customerReviews\">\n                <div class=\"d-flex align-item-center\" style=\"gap: 5px;\">\n                    <div class=\"name-tag\">{{review.userName | slice: 0:1}}</div>\n                    <span style=\"position: relative; top: 5px;\">{{review.userName | titlecase}}</span>\n                </div>\n                <div class=\"d-flex my-2\" style=\"width: fit-content; height: 20px; gap: 10px;\">            \n                    <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\" />\n                    <div>{{review.title | titlecase}}</div>\n                </div>\n                <div class=\"date\">{{ review.createdTimeStamp | date }}</div>\n                <div class=\"description\">{{review.review | titlecase}}</div>\n                <hr>\n            </ng-container>\n        </div>\n    </div>\n    \n  <!-- <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container> -->\n\n</section>", styles: [".mainContainer{display:flex;justify-content:space-around}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.rating-bar{width:300px}h3{margin-bottom:20px}.count{width:20px}.left-panel{width:20%}.right-panel{width:70%}.description{width:80%}.name-tag{display:flex;justify-content:center;align-items:center;padding:5px;border-radius:50%;background-color:#3b82f6;color:#fff;height:30px;width:30px}.customer-reviews{padding-bottom:10px;padding-left:10px}@media screen and (max-width: 475px){.mainContainer{flex-direction:column!important}.left-panel{width:95%;margin:auto}.right-panel{width:95%;margin:auto}.right-panel .description{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.SlicePipe, name: "slice" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i6.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomerReviewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-customer-review', standalone: true, imports: [
                        RatingModule,
                        FormsModule,
                        CommonModule,
                        ProgressBarModule, SvgDividerComponent
                    ], template: "<section class=\"mainContainer\" style=\"gap: 20px;\" *ngIf=\"customerReviews.length\">\n    <div class=\"left-panel\">\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Customer Reviews</h3>\n        <p-rating [(ngModel)]=\"totalRating\" [cancel]=\"false\" [readonly]=\"true\" />\n        <div class=\"stars\">\n            <ng-container *ngFor=\"let rating of overallRatingCount | keyvalue; let idx = index\">\n                <div class=\"d-flex\" style=\"gap: 5px; margin: 10px 0px\">\n                    <div class=\"count\">{{rating.key}}</div>\n                    <div class=\"rating-bar\">\n                        <p-progressBar [value]=\"getPercentage(rating?.value)\"  [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [showValue]=\"false\" />\n                    </div>\n                    <div class=\"count\">{{getPercentage(rating?.value)}}%</div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n    <div class=\"right-panel\">\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Top Reviews</h3>\n        <div class=\"customer-reviews\">\n            <ng-container *ngFor=\"let review of customerReviews\">\n                <div class=\"d-flex align-item-center\" style=\"gap: 5px;\">\n                    <div class=\"name-tag\">{{review.userName | slice: 0:1}}</div>\n                    <span style=\"position: relative; top: 5px;\">{{review.userName | titlecase}}</span>\n                </div>\n                <div class=\"d-flex my-2\" style=\"width: fit-content; height: 20px; gap: 10px;\">            \n                    <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\" />\n                    <div>{{review.title | titlecase}}</div>\n                </div>\n                <div class=\"date\">{{ review.createdTimeStamp | date }}</div>\n                <div class=\"description\">{{review.review | titlecase}}</div>\n                <hr>\n            </ng-container>\n        </div>\n    </div>\n    \n  <!-- <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container> -->\n\n</section>", styles: [".mainContainer{display:flex;justify-content:space-around}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.rating-bar{width:300px}h3{margin-bottom:20px}.count{width:20px}.left-panel{width:20%}.right-panel{width:70%}.description{width:80%}.name-tag{display:flex;justify-content:center;align-items:center;padding:5px;border-radius:50%;background-color:#3b82f6;color:#fff;height:30px;width:30px}.customer-reviews{padding-bottom:10px;padding-left:10px}@media screen and (max-width: 475px){.mainContainer{flex-direction:column!important}.left-panel{width:95%;margin:auto}.right-panel{width:95%;margin:auto}.right-panel .description{width:100%}}\n"] }]
        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2.RestService }], propDecorators: { data: [{
                type: Input
            }], index: [{
                type: Input
            }], edit: [{
                type: Input
            }], delete: [{
                type: Input
            }], nextComponentColor: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 