import { Clipboard } from '@angular/cdk/clipboard';
import { Component, DestroyRef, Input, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { TranslateService, TranslatePipe } from '@ngx-translate/core';
import { ToastService } from '@seniorsistemas/angular-components/toast';
import { finalize, first } from 'rxjs/operators';
import { marked } from 'marked';
import { NgClass } from '@angular/common';
import { BadgeComponent } from '@seniorsistemas/angular-components/badge';
import { InsightsCardLoaderComponent } from './components/insights-card-loader/insights-card-loader.component';
import * as i0 from "@angular/core";
export class InsightsCardComponent {
    clipboard = inject(Clipboard);
    toastService = inject(ToastService);
    translateService = inject(TranslateService);
    _destroyRef = inject(DestroyRef);
    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)), takeUntilDestroyed(this._destroyRef))
            .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: "17.0.0", version: "18.2.14", type: InsightsCardComponent, isStandalone: true, selector: "s-insights-card", inputs: { insight: "insight" }, ngImport: i0, template: "<div\r\n    class=\"insights-card\"\r\n    [ngClass]=\"{ 'insights-card--close': !open }\"\r\n>\r\n    <div\r\n        class=\"header\"\r\n        (click)=\"toggle()\"\r\n    >\r\n        <s-badge\r\n            text=\"Insight\"\r\n            iconClass=\"fal fa-lightbulb\"\r\n        ></s-badge>\r\n        <span class=\"insight-title\">{{ insight.title }}</span>\r\n        <span class=\"toggle-icon\">\r\n            <i\r\n                class=\"fas\"\r\n                [ngClass]=\"{\r\n                    'fa-angle-down': !open,\r\n                    'fa-angle-up': open,\r\n                }\"\r\n            >\r\n            </i>\r\n        </span>\r\n    </div>\r\n    <div class=\"content\">\r\n        @if (isLoading) {\r\n            <s-insights-card-loader></s-insights-card-loader>\r\n        } @else {\r\n            @if (content) {\r\n                <span\r\n                    class=\"text\"\r\n                    [innerHTML]=\"content\"\r\n                ></span>\r\n                <span class=\"insight-footer\">{{ 'platform.angular_components.insight_footer' | translate }}</span>\r\n            } @else {\r\n                <span class=\"text text--error\">{{\r\n                    'platform.angular_components.error_loading_insight_alt' | translate\r\n                }}</span>\r\n            }\r\n            <div class=\"options\">\r\n                <button\r\n                    [disabled]=\"!content\"\r\n                    (click)=\"copyContent()\"\r\n                    class=\"option\"\r\n                >\r\n                    <i class=\"fal fa-copy\"></i>\r\n                </button>\r\n                <button\r\n                    (click)=\"reloadContent()\"\r\n                    class=\"option\"\r\n                >\r\n                    <i class=\"fal fa-redo\"></i>\r\n                </button>\r\n                @if (insight.onLikeSelected) {\r\n                    <button\r\n                        [disabled]=\"!content\"\r\n                        (click)=\"onLikeSelected()\"\r\n                        class=\"option\"\r\n                    >\r\n                        <i\r\n                            [ngClass]=\"{\r\n                                fal: !likeSelected,\r\n                                fas: likeSelected,\r\n                                'fa-thumbs-up': true,\r\n                            }\"\r\n                        >\r\n                        </i>\r\n                    </button>\r\n                }\r\n                @if (insight.onDislikeSelected) {\r\n                    <button\r\n                        [disabled]=\"!content\"\r\n                        (click)=\"onDislikeSelected()\"\r\n                        class=\"option\"\r\n                    >\r\n                        <i\r\n                            [ngClass]=\"{\r\n                                fal: !dislikeSelected,\r\n                                fas: dislikeSelected,\r\n                                'fa-thumbs-down': true,\r\n                            }\"\r\n                        ></i>\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n    </div>\r\n</div>\r\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BadgeComponent, selector: "s-badge", inputs: ["type", "color", "title", "text", "selectable", "iconClass", "iconPosition", "infoSign", "enableTruncateText"], outputs: ["selected"] }, { kind: "component", type: InsightsCardLoaderComponent, selector: "s-insights-card-loader" }, { kind: "pipe", type: 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', standalone: true, imports: [NgClass, BadgeComponent, InsightsCardLoaderComponent, TranslatePipe], template: "<div\r\n    class=\"insights-card\"\r\n    [ngClass]=\"{ 'insights-card--close': !open }\"\r\n>\r\n    <div\r\n        class=\"header\"\r\n        (click)=\"toggle()\"\r\n    >\r\n        <s-badge\r\n            text=\"Insight\"\r\n            iconClass=\"fal fa-lightbulb\"\r\n        ></s-badge>\r\n        <span class=\"insight-title\">{{ insight.title }}</span>\r\n        <span class=\"toggle-icon\">\r\n            <i\r\n                class=\"fas\"\r\n                [ngClass]=\"{\r\n                    'fa-angle-down': !open,\r\n                    'fa-angle-up': open,\r\n                }\"\r\n            >\r\n            </i>\r\n        </span>\r\n    </div>\r\n    <div class=\"content\">\r\n        @if (isLoading) {\r\n            <s-insights-card-loader></s-insights-card-loader>\r\n        } @else {\r\n            @if (content) {\r\n                <span\r\n                    class=\"text\"\r\n                    [innerHTML]=\"content\"\r\n                ></span>\r\n                <span class=\"insight-footer\">{{ 'platform.angular_components.insight_footer' | translate }}</span>\r\n            } @else {\r\n                <span class=\"text text--error\">{{\r\n                    'platform.angular_components.error_loading_insight_alt' | translate\r\n                }}</span>\r\n            }\r\n            <div class=\"options\">\r\n                <button\r\n                    [disabled]=\"!content\"\r\n                    (click)=\"copyContent()\"\r\n                    class=\"option\"\r\n                >\r\n                    <i class=\"fal fa-copy\"></i>\r\n                </button>\r\n                <button\r\n                    (click)=\"reloadContent()\"\r\n                    class=\"option\"\r\n                >\r\n                    <i class=\"fal fa-redo\"></i>\r\n                </button>\r\n                @if (insight.onLikeSelected) {\r\n                    <button\r\n                        [disabled]=\"!content\"\r\n                        (click)=\"onLikeSelected()\"\r\n                        class=\"option\"\r\n                    >\r\n                        <i\r\n                            [ngClass]=\"{\r\n                                fal: !likeSelected,\r\n                                fas: likeSelected,\r\n                                'fa-thumbs-up': true,\r\n                            }\"\r\n                        >\r\n                        </i>\r\n                    </button>\r\n                }\r\n                @if (insight.onDislikeSelected) {\r\n                    <button\r\n                        [disabled]=\"!content\"\r\n                        (click)=\"onDislikeSelected()\"\r\n                        class=\"option\"\r\n                    >\r\n                        <i\r\n                            [ngClass]=\"{\r\n                                fal: !dislikeSelected,\r\n                                fas: dislikeSelected,\r\n                                'fa-thumbs-down': true,\r\n                            }\"\r\n                        ></i>\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n    </div>\r\n</div>\r\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, 