import { Clipboard } from '@angular/cdk/clipboard';
import { Component, Input, inject } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { ToastService } from '@seniorsistemas/angular-components/toast';
import { finalize, first } from 'rxjs/operators';
import { marked } from 'marked';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@seniorsistemas/angular-components/badge";
import * as i3 from "./components/insights-card-loader/insights-card-loader.component";
import * as i4 from "@ngx-translate/core";
export class InsightsCardComponent {
    clipboard = inject(Clipboard);
    toastService = inject(ToastService);
    translateService = inject(TranslateService);
    insight;
    open = false;
    isLoading = false;
    content;
    likeSelected = false;
    dislikeSelected = false;
    toggle() {
        const newOpenState = !this.open;
        this.open = newOpenState;
        if (newOpenState === true && this.insight.onOpenSidebar) {
            this.insight.onOpenSidebar();
        }
        else if (newOpenState === false && this.insight.onCloseSideBar) {
            this.insight.onCloseSideBar();
        }
        if (newOpenState === true) {
            this._requestInsight();
        }
    }
    onLikeSelected() {
        if (this.likeSelected) {
            this.likeSelected = false;
        }
        else {
            this.likeSelected = true;
            this.dislikeSelected = false;
            this.insight.onLikeSelected?.();
        }
    }
    onDislikeSelected() {
        if (this.dislikeSelected) {
            this.dislikeSelected = false;
        }
        else {
            this.dislikeSelected = true;
            this.likeSelected = false;
            this.insight.onDislikeSelected?.();
        }
    }
    copyContent() {
        if (!this.content)
            return;
        this.insight.onCopy?.(this.content);
        if (this.clipboard.copy(this.content)) {
            this.toastService.show({
                severity: 'info',
                title: this.translateService.instant('platform.angular_components.copied_to_clipboard'),
            });
        }
    }
    reloadContent() {
        this._requestInsight();
    }
    _requestInsight() {
        this.isLoading = true;
        this.insight.request$
            .pipe(first(), finalize(() => (this.isLoading = false)))
            .subscribe(async (content) => {
            this.content = await marked(content);
            if (this.insight.onContentLoaded) {
                this.insight.onContentLoaded();
            }
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InsightsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InsightsCardComponent, selector: "s-insights-card", inputs: { insight: "insight" }, ngImport: i0, template: "<div\n    class=\"insights-card\"\n    [ngClass]=\"{ 'insights-card--close': !open }\"\n>\n    <div\n        class=\"header\"\n        (click)=\"toggle()\"\n    >\n        <s-badge\n            text=\"Insight\"\n            iconClass=\"fal fa-lightbulb\"\n        ></s-badge>\n        <span class=\"insight-title\">{{ insight.title }}</span>\n        <span class=\"toggle-icon\">\n            <i\n                class=\"fas\"\n                [ngClass]=\"{\n                    'fa-angle-down': !open,\n                    'fa-angle-up': open,\n                }\"\n            >\n            </i>\n        </span>\n    </div>\n    <div class=\"content\">\n        <ng-container *ngIf=\"isLoading; then loadingBlock; else contentBlock\"></ng-container>\n        <ng-template #loadingBlock>\n            <s-insights-card-loader></s-insights-card-loader>\n        </ng-template>\n        <ng-template #contentBlock>\n            <ng-container *ngIf=\"content; then successBlock; else errorBlock\"></ng-container>\n\n            <ng-template #successBlock>\n                <span\n                    class=\"text\"\n                    [innerHTML]=\"content\"\n                ></span>\n                <span class=\"insight-footer\">{{ \"platform.angular_components.insight_footer\" | translate }}</span>\n\n            </ng-template>\n            <ng-template #errorBlock>\n                <span class=\"text text--error\">{{\n                    'platform.angular_components.error_loading_insight_alt' | translate\n                }}</span>\n            </ng-template>\n\n            <div class=\"options\">\n                <button\n                    [disabled]=\"!content\"\n                    (click)=\"copyContent()\"\n                    class=\"option\"\n                >\n                    <i class=\"fal fa-copy\"></i>\n                </button>\n                <button\n                    (click)=\"reloadContent()\"\n                    class=\"option\"\n                >\n                    <i class=\"fal fa-redo\"></i>\n                </button>\n                <button\n                    *ngIf=\"insight.onLikeSelected\"\n                    [disabled]=\"!content\"\n                    (click)=\"onLikeSelected()\"\n                    class=\"option\"\n                >\n                    <i\n                        [ngClass]=\"{\n                            fal: !likeSelected,\n                            fas: likeSelected,\n                            'fa-thumbs-up': true,\n                        }\"\n                    >\n                    </i>\n                </button>\n                <button\n                    *ngIf=\"insight.onDislikeSelected\"\n                    [disabled]=\"!content\"\n                    (click)=\"onDislikeSelected()\"\n                    class=\"option\"\n                >\n                    <i\n                        [ngClass]=\"{\n                            fal: !dislikeSelected,\n                            fas: dislikeSelected,\n                            'fa-thumbs-down': true,\n                        }\"\n                    ></i>\n                </button>\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: [".insights-card{background-color:#fff;border:1px solid #9ecad4;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;overflow:hidden}.insights-card .header{align-items:center;background-color:#f1f7f8;border-bottom:1px solid #9ecad4;display:flex;gap:8px;min-height:60px;padding:8px 16px;-webkit-user-select:none;user-select:none}.insights-card .header .insight-title{color:#428bca;flex-grow:1;font-family:Open Sans,sans-serif;font-size:14px;line-height:150%}.insights-card .header .toggle-icon{color:#888b99;font-size:20px}.insights-card .content{align-items:center;justify-content:space-between;cursor:auto;display:flex;flex-direction:column;gap:16px;min-height:160px;padding:24px}.insights-card .content .text{color:#212533;font-family:Open Sans,sans-serif;font-size:14px;width:100%}.insights-card .content .text--error{text-align:center}.insights-card .content .insight-footer{color:#888b99;font-family:Open Sans,sans-serif;font-size:12px;text-align:center}.insights-card .content .options{display:flex;gap:8px}.insights-card .content .options .option{background-color:transparent;border:none;color:#428bca;cursor:pointer;font-size:12px}.insights-card .content .options .option:disabled{color:#c1c1cc;cursor:auto}.insights-card--close{border-color:#dedce5}.insights-card--close .header{background-color:#fbfafc;border:none;border-color:#dedce5}.insights-card--close .header .insight-title{color:#888b99}.insights-card--close .content{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.BadgeComponent, selector: "s-badge", inputs: ["type", "color", "title", "text", "selectable", "iconClass", "iconPosition", "infoSign", "enableTruncateText"], outputs: ["selected"] }, { kind: "component", type: i3.InsightsCardLoaderComponent, selector: "s-insights-card-loader" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InsightsCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-insights-card', template: "<div\n    class=\"insights-card\"\n    [ngClass]=\"{ 'insights-card--close': !open }\"\n>\n    <div\n        class=\"header\"\n        (click)=\"toggle()\"\n    >\n        <s-badge\n            text=\"Insight\"\n            iconClass=\"fal fa-lightbulb\"\n        ></s-badge>\n        <span class=\"insight-title\">{{ insight.title }}</span>\n        <span class=\"toggle-icon\">\n            <i\n                class=\"fas\"\n                [ngClass]=\"{\n                    'fa-angle-down': !open,\n                    'fa-angle-up': open,\n                }\"\n            >\n            </i>\n        </span>\n    </div>\n    <div class=\"content\">\n        <ng-container *ngIf=\"isLoading; then loadingBlock; else contentBlock\"></ng-container>\n        <ng-template #loadingBlock>\n            <s-insights-card-loader></s-insights-card-loader>\n        </ng-template>\n        <ng-template #contentBlock>\n            <ng-container *ngIf=\"content; then successBlock; else errorBlock\"></ng-container>\n\n            <ng-template #successBlock>\n                <span\n                    class=\"text\"\n                    [innerHTML]=\"content\"\n                ></span>\n                <span class=\"insight-footer\">{{ \"platform.angular_components.insight_footer\" | translate }}</span>\n\n            </ng-template>\n            <ng-template #errorBlock>\n                <span class=\"text text--error\">{{\n                    'platform.angular_components.error_loading_insight_alt' | translate\n                }}</span>\n            </ng-template>\n\n            <div class=\"options\">\n                <button\n                    [disabled]=\"!content\"\n                    (click)=\"copyContent()\"\n                    class=\"option\"\n                >\n                    <i class=\"fal fa-copy\"></i>\n                </button>\n                <button\n                    (click)=\"reloadContent()\"\n                    class=\"option\"\n                >\n                    <i class=\"fal fa-redo\"></i>\n                </button>\n                <button\n                    *ngIf=\"insight.onLikeSelected\"\n                    [disabled]=\"!content\"\n                    (click)=\"onLikeSelected()\"\n                    class=\"option\"\n                >\n                    <i\n                        [ngClass]=\"{\n                            fal: !likeSelected,\n                            fas: likeSelected,\n                            'fa-thumbs-up': true,\n                        }\"\n                    >\n                    </i>\n                </button>\n                <button\n                    *ngIf=\"insight.onDislikeSelected\"\n                    [disabled]=\"!content\"\n                    (click)=\"onDislikeSelected()\"\n                    class=\"option\"\n                >\n                    <i\n                        [ngClass]=\"{\n                            fal: !dislikeSelected,\n                            fas: dislikeSelected,\n                            'fa-thumbs-down': true,\n                        }\"\n                    ></i>\n                </button>\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: [".insights-card{background-color:#fff;border:1px solid #9ecad4;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;overflow:hidden}.insights-card .header{align-items:center;background-color:#f1f7f8;border-bottom:1px solid #9ecad4;display:flex;gap:8px;min-height:60px;padding:8px 16px;-webkit-user-select:none;user-select:none}.insights-card .header .insight-title{color:#428bca;flex-grow:1;font-family:Open Sans,sans-serif;font-size:14px;line-height:150%}.insights-card .header .toggle-icon{color:#888b99;font-size:20px}.insights-card .content{align-items:center;justify-content:space-between;cursor:auto;display:flex;flex-direction:column;gap:16px;min-height:160px;padding:24px}.insights-card .content .text{color:#212533;font-family:Open Sans,sans-serif;font-size:14px;width:100%}.insights-card .content .text--error{text-align:center}.insights-card .content .insight-footer{color:#888b99;font-family:Open Sans,sans-serif;font-size:12px;text-align:center}.insights-card .content .options{display:flex;gap:8px}.insights-card .content .options .option{background-color:transparent;border:none;color:#428bca;cursor:pointer;font-size:12px}.insights-card .content .options .option:disabled{color:#c1c1cc;cursor:auto}.insights-card--close{border-color:#dedce5}.insights-card--close .header{background-color:#fbfafc;border:none;border-color:#dedce5}.insights-card--close .header .insight-title{color:#888b99}.insights-card--close .content{display:none}\n"] }]
        }], propDecorators: { insight: [{
                type: Input,
                args: [{ required: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 