import { Component, EventEmitter, Input, Output } from '@angular/core';
import { WsEvents } from '@sunbird-cb/utils-v2';
import * as _ from 'lodash';
import * as i0 from "@angular/core";
import * as i1 from "../../../../../_services/samuhik-charcha.service";
import * as i2 from "@sunbird-cb/utils-v2";
import * as i3 from "@angular/common";
import * as i4 from "@angular/material/icon";
import * as i5 from "@sunbird-cb/consumption";
export class SamuhikCharchaContentComponent {
    constructor(samuhikCharchaSvc, events, configService) {
        this.samuhikCharchaSvc = samuhikCharchaSvc;
        this.events = events;
        this.configService = configService;
        this.locked = false;
        this.resumeContent = new EventEmitter();
        this.samuhikConfigLoaded = false;
    }
    get getCurrentTimeInUTC() {
        const currentDate = new Date();
        const isoString = currentDate.toISOString();
        return isoString.replace('Z', '+0000');
    }
    async ngOnInit() {
        const orgId = _.get(this.configService, 'userProfile.userRootOrg.id', '');
        await this.getSamuhikConfig();
        if (!this.conditionData?.userEnrollmentList?.length || this.conditionData?.userEnrollmentList[0]?.completionPercentage < 30) {
            this.locked = true;
        }
        if (this.content) {
            const eventsLinked = this.content.eventLinked || [];
            this.samuhikConfig.strips[0].tabs.forEach((ele) => {
                ele.request.searchV6.request.filters.identifier = eventsLinked;
                ele.request.searchV6.request.filters.createdFor = [orgId];
                if (ele.request.searchV6.request.filters.endDateTime.hasOwnProperty('>=')) {
                    ele.request.searchV6.request.filters.endDateTime['>='] = this.getCurrentTimeInUTC;
                }
                if (ele.request.searchV6.request.filters.endDateTime.hasOwnProperty('<')) {
                    ele.request.searchV6.request.filters.endDateTime['<'] = this.getCurrentTimeInUTC;
                }
            });
            this.samuhikConfigLoaded = true;
        }
        if (this.samuhikConfig && this.samuhikConfig.strips && this.samuhikConfig.strips.length) {
            if (this.samuhikConfig.strips[0] && this.samuhikConfig.strips[0]['viewMoreUrl'] && this.samuhikConfig.strips[0]['viewMoreUrl']['path']) {
                this.samuhikConfig.strips[0]['viewMoreUrl']['path'] = this.samuhikConfig.strips[0]['viewMoreUrl']['path'].split('?')[0];
                this.samuhikConfig.strips[0]['viewMoreUrl']['viewMoreText'] = "Show all";
            }
            if (_.get(this.samuhikConfig, 'strips[0].viewMoreUrl.queryParams')) {
                this.samuhikConfig.strips[0].viewMoreUrl.queryParams['courseId'] = this.content.identifier;
            }
        }
    }
    ngOnDestroy() {
        // Clean up subscriptions if needed
    }
    async getSamuhikConfig() {
        try {
            this.samuhikConfig = await this.samuhikCharchaSvc.fetchConfigFile().toPromise();
        }
        catch (error) {
            console.error('Error fetching Samuhik config:', error);
        }
    }
    raiseTelemetryInteratEvent(event) {
        let subType = 'my-events';
        switch (_.get(event, 'context.pageSection')) {
            case 'myEvents':
                subType = 'my-events';
                break;
            case 'recommendedEvents':
                subType = 'recommended-events';
                break;
            case 'trendingEvents':
                subType = 'trending-events';
                break;
            case 'featuredEvents':
                subType = 'featured-events';
                break;
        }
        this.events.raiseInteractTelemetry({
            type: 'click',
            subType: subType,
            id: "card-content",
        }, {
            id: _.get(event, 'content.contentId'),
            type: "event"
        }, {
            module: WsEvents.EnumTelemetrymodules.EVENTS,
        });
    }
    resumeContentData() {
        this.resumeContent.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SamuhikCharchaContentComponent, deps: [{ token: i1.SamuhikCharchaService }, { token: i2.EventService }, { token: i2.ConfigurationsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SamuhikCharchaContentComponent, selector: "ws-widget-samuhik-charcha-content", inputs: { content: "content", conditionData: "conditionData", locked: "locked" }, outputs: { resumeContent: "resumeContent" }, ngImport: i0, template: "<div class=\"main-event-container\">\n  <div class=\"event-container-locked\" *ngIf=\"locked\">\n    <div class=\"locked-overlay\">\n      <div class=\"locked-content\" *ngIf=\"!conditionData?.userEnrollmentList?.length\">\n        <div class=\"locked-icon-wrapper\">\n          <mat-icon svgIcon=\"content-locked\" class=\"locked-icon\"></mat-icon>\n        </div>\n        <h2 class=\"locked-title\">Enroll in the Course to Unlock Samuhik Charcha</h2>\n        <p class=\"locked-description\">\n          Events related to this course will appear here once you complete the required learning. Continue your course\n          to\n          participate and engage with the community.\n        </p>\n      </div>\n      <div class=\"locked-content progress-content\"\n        *ngIf=\"conditionData?.userEnrollmentList?.length && conditionData?.userEnrollmentList[0]?.completionPercentage < 30\">\n        <h2 class=\"progress-title\">Complete the course to access Samuhik Charcha</h2>\n\n        <div class=\"progress-section\">\n          <div class=\"progress-label\">\n            <span class=\"progress-text\">Course Progress: {{conditionData?.userEnrollmentList[0]?.completionPercentage ||\n              0}}%</span>\n          </div>\n          <div class=\"progress-bar-container\">\n            <div class=\"progress-bar-fill\"\n              [style.width.%]=\"conditionData?.userEnrollmentList[0]?.completionPercentage || 0\">\n            </div>\n          </div>\n        </div>\n\n        <p class=\"progress-description\">\n          You need to complete 30% of the course to access Samuhik Charcha. Keep learning to unlock Samuhik Charcha\n          events.\n        </p>\n\n        <button class=\"mat-button continue-course-btn\" type=\"button\" (click)=\"resumeContentData()\">\n          Continue Course\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"event-container-unlocked w-full\" [class.blurred]=\"locked\">\n    <div class=\"welcome-container\">\n      <div class=\"welcome-card\">\n        <div class=\"icon-container\">\n          <mat-icon class=\"mr-1\" svgIcon=\"chat\" class=\"welcome-icon\"></mat-icon>\n        </div>\n        <div class=\"content-container\">\n          <h2 class=\"welcome-title\">Welcome to Samuhik Charcha!</h2>\n          <p class=\"welcome-description\">\n            Explore live and upcoming events that extend your learning from this course. Engage with experts, gain\n            insights,\n            and stay connected to the larger learning network.\n          </p>\n        </div>\n      </div>\n    </div>\n    <div class=\"event-container\" *ngIf=\"samuhikConfigLoaded\">\n      <sb-uic-content-strip-with-tabs [widgetData]=\"samuhikConfig\"\n        (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\">\n      </sb-uic-content-strip-with-tabs>\n    </div>\n  </div>\n</div>", styles: [".main-event-container{position:relative;display:flex;justify-content:center;min-height:300px}.event-container-locked{position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:600px;display:flex;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:#fff6;border-radius:12px}.locked-overlay{background:#fff;padding:20px;width:100%;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:#fff6;border-radius:12px}.locked-content{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:800px;margin:0 auto}.locked-icon-wrapper{position:relative;margin-bottom:5px}.locked-icon-wrapper .locked-icon{width:120px;height:120px;font-size:120px;color:#2196f3}.locked-icon-wrapper .progress-badge{position:absolute;bottom:-8px;right:-8px;background:#2196f3;color:#fff;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;box-shadow:0 2px 8px #2196f34d}.locked-title{margin:0 0 16px;font-size:14px;font-weight:600;color:#1a1a1a;line-height:1.3}.locked-description{margin:0;font-size:14px;line-height:1.6;color:#4a4a4a}.progress-content{gap:20px}.progress-content .progress-title{margin:0;font-size:20px;font-weight:600;color:#1a1a1a}.progress-content .progress-section{width:100%;margin-bottom:8px}.progress-content .progress-label{margin-bottom:8px;text-align:left}.progress-content .progress-label .progress-text{font-size:16px;font-weight:600;color:#1a1a1a}.progress-content .progress-bar-container{width:100%;height:12px;background:#e0e0e0;border-radius:6px;overflow:hidden}.progress-content .progress-bar-fill{height:100%;background:linear-gradient(90deg,#ff9800,#ff5722);border-radius:6px;transition:width .3s ease}.progress-content .progress-description{margin:0;font-size:14px;line-height:1.6;color:#4a4a4a}.progress-content .continue-course-btn{width:100%;height:48px;background:#1a4ca1;color:#fff;font-size:16px;font-weight:500;border-radius:4px;border:none}.event-container-unlocked{position:relative;transition:filter .3s ease}.blurred{filter:blur(3px);pointer-events:none;-webkit-user-select:none;user-select:none}.welcome-container{width:100%;padding:16px 0}.welcome-card{display:flex;align-items:center;gap:20px;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #00000014}.icon-container{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.icon-container .welcome-icon{font-size:40px;width:40px;height:40px}.content-container{flex:1;display:flex;flex-direction:column;gap:8px}.welcome-title{margin:0;font-size:14px;font-weight:700;color:#1a1a1a;line-height:1.3}.welcome-description{margin:0;font-size:14px;line-height:1.6;color:#4a4a4a}@media (max-width: 768px){.welcome-card{flex-direction:column;padding:20px}.icon-container{width:48px;height:48px}.icon-container .welcome-icon{font-size:28px}.welcome-title{font-size:18px}.welcome-description{font-size:13px}}\n"], dependencies: [{ 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.ContentStripWithTabsLibComponent, selector: "sb-uic-content-strip-with-tabs", inputs: ["widgetData", "providerId", "emitViewAll", "channnelName", "isEdit"], outputs: ["emptyResponse", "viewAllResponse", "telemtryResponse", "editStripContent", "toggleSectionVisibility", "removeStrip"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SamuhikCharchaContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-widget-samuhik-charcha-content', template: "<div class=\"main-event-container\">\n  <div class=\"event-container-locked\" *ngIf=\"locked\">\n    <div class=\"locked-overlay\">\n      <div class=\"locked-content\" *ngIf=\"!conditionData?.userEnrollmentList?.length\">\n        <div class=\"locked-icon-wrapper\">\n          <mat-icon svgIcon=\"content-locked\" class=\"locked-icon\"></mat-icon>\n        </div>\n        <h2 class=\"locked-title\">Enroll in the Course to Unlock Samuhik Charcha</h2>\n        <p class=\"locked-description\">\n          Events related to this course will appear here once you complete the required learning. Continue your course\n          to\n          participate and engage with the community.\n        </p>\n      </div>\n      <div class=\"locked-content progress-content\"\n        *ngIf=\"conditionData?.userEnrollmentList?.length && conditionData?.userEnrollmentList[0]?.completionPercentage < 30\">\n        <h2 class=\"progress-title\">Complete the course to access Samuhik Charcha</h2>\n\n        <div class=\"progress-section\">\n          <div class=\"progress-label\">\n            <span class=\"progress-text\">Course Progress: {{conditionData?.userEnrollmentList[0]?.completionPercentage ||\n              0}}%</span>\n          </div>\n          <div class=\"progress-bar-container\">\n            <div class=\"progress-bar-fill\"\n              [style.width.%]=\"conditionData?.userEnrollmentList[0]?.completionPercentage || 0\">\n            </div>\n          </div>\n        </div>\n\n        <p class=\"progress-description\">\n          You need to complete 30% of the course to access Samuhik Charcha. Keep learning to unlock Samuhik Charcha\n          events.\n        </p>\n\n        <button class=\"mat-button continue-course-btn\" type=\"button\" (click)=\"resumeContentData()\">\n          Continue Course\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"event-container-unlocked w-full\" [class.blurred]=\"locked\">\n    <div class=\"welcome-container\">\n      <div class=\"welcome-card\">\n        <div class=\"icon-container\">\n          <mat-icon class=\"mr-1\" svgIcon=\"chat\" class=\"welcome-icon\"></mat-icon>\n        </div>\n        <div class=\"content-container\">\n          <h2 class=\"welcome-title\">Welcome to Samuhik Charcha!</h2>\n          <p class=\"welcome-description\">\n            Explore live and upcoming events that extend your learning from this course. Engage with experts, gain\n            insights,\n            and stay connected to the larger learning network.\n          </p>\n        </div>\n      </div>\n    </div>\n    <div class=\"event-container\" *ngIf=\"samuhikConfigLoaded\">\n      <sb-uic-content-strip-with-tabs [widgetData]=\"samuhikConfig\"\n        (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\">\n      </sb-uic-content-strip-with-tabs>\n    </div>\n  </div>\n</div>", styles: [".main-event-container{position:relative;display:flex;justify-content:center;min-height:300px}.event-container-locked{position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:600px;display:flex;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:#fff6;border-radius:12px}.locked-overlay{background:#fff;padding:20px;width:100%;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:#fff6;border-radius:12px}.locked-content{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:800px;margin:0 auto}.locked-icon-wrapper{position:relative;margin-bottom:5px}.locked-icon-wrapper .locked-icon{width:120px;height:120px;font-size:120px;color:#2196f3}.locked-icon-wrapper .progress-badge{position:absolute;bottom:-8px;right:-8px;background:#2196f3;color:#fff;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;box-shadow:0 2px 8px #2196f34d}.locked-title{margin:0 0 16px;font-size:14px;font-weight:600;color:#1a1a1a;line-height:1.3}.locked-description{margin:0;font-size:14px;line-height:1.6;color:#4a4a4a}.progress-content{gap:20px}.progress-content .progress-title{margin:0;font-size:20px;font-weight:600;color:#1a1a1a}.progress-content .progress-section{width:100%;margin-bottom:8px}.progress-content .progress-label{margin-bottom:8px;text-align:left}.progress-content .progress-label .progress-text{font-size:16px;font-weight:600;color:#1a1a1a}.progress-content .progress-bar-container{width:100%;height:12px;background:#e0e0e0;border-radius:6px;overflow:hidden}.progress-content .progress-bar-fill{height:100%;background:linear-gradient(90deg,#ff9800,#ff5722);border-radius:6px;transition:width .3s ease}.progress-content .progress-description{margin:0;font-size:14px;line-height:1.6;color:#4a4a4a}.progress-content .continue-course-btn{width:100%;height:48px;background:#1a4ca1;color:#fff;font-size:16px;font-weight:500;border-radius:4px;border:none}.event-container-unlocked{position:relative;transition:filter .3s ease}.blurred{filter:blur(3px);pointer-events:none;-webkit-user-select:none;user-select:none}.welcome-container{width:100%;padding:16px 0}.welcome-card{display:flex;align-items:center;gap:20px;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #00000014}.icon-container{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.icon-container .welcome-icon{font-size:40px;width:40px;height:40px}.content-container{flex:1;display:flex;flex-direction:column;gap:8px}.welcome-title{margin:0;font-size:14px;font-weight:700;color:#1a1a1a;line-height:1.3}.welcome-description{margin:0;font-size:14px;line-height:1.6;color:#4a4a4a}@media (max-width: 768px){.welcome-card{flex-direction:column;padding:20px}.icon-container{width:48px;height:48px}.icon-container .welcome-icon{font-size:28px}.welcome-title{font-size:18px}.welcome-description{font-size:13px}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.SamuhikCharchaService }, { type: i2.EventService }, { type: i2.ConfigurationsService }]; }, propDecorators: { content: [{
                type: Input
            }], conditionData: [{
                type: Input
            }], locked: [{
                type: Input
            }], resumeContent: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 