import { Component, EventEmitter, Input, Output } from '@angular/core';
import { GReactionType } from 'inspire-gql';
import { CallingComponent, Reaction } from '../inspire-library.enum';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../click-outside.directive";
function AddReactionsComponent_div_0_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 2);
    i0.ɵɵlistener("mouseover", function AddReactionsComponent_div_0_Template_div_mouseover_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return ctx_r2.onMouseOver(); })("mouseleave", function AddReactionsComponent_div_0_Template_div_mouseleave_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r4 = i0.ɵɵnextContext(); return ctx_r4.onMouseLeave(); })("clickOutside", function AddReactionsComponent_div_0_Template_div_clickOutside_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r5 = i0.ɵɵnextContext(); return ctx_r5.showReactionPopup && ctx_r5.onClickReaction(false); })("click", function AddReactionsComponent_div_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r6 = i0.ɵɵnextContext(); return !ctx_r6.showReactionPopup && ctx_r6.onClickReaction(true); });
    i0.ɵɵelementStart(1, "a", 3);
    i0.ɵɵtext(2, "Add Reaction");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 4);
    i0.ɵɵelementStart(4, "div", 5);
    i0.ɵɵlistener("click", function AddReactionsComponent_div_0_Template_div_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r7 = i0.ɵɵnextContext(); return ctx_r7.onToggleReaction(ctx_r7.reaction == null ? null : ctx_r7.reaction.support); });
    i0.ɵɵelement(5, "i", 6);
    i0.ɵɵtext(6, " Support ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "div", 5);
    i0.ɵɵlistener("click", function AddReactionsComponent_div_0_Template_div_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r8 = i0.ɵɵnextContext(); return ctx_r8.onToggleReaction(ctx_r8.reaction == null ? null : ctx_r8.reaction.useful); });
    i0.ɵɵelement(8, "i", 7);
    i0.ɵɵtext(9, " Useful ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(10, "div", 5);
    i0.ɵɵlistener("click", function AddReactionsComponent_div_0_Template_div_click_10_listener() { i0.ɵɵrestoreView(_r3); const ctx_r9 = i0.ɵɵnextContext(); return ctx_r9.onToggleReaction(ctx_r9.reaction == null ? null : ctx_r9.reaction.thanks); });
    i0.ɵɵelement(11, "i", 8);
    i0.ɵɵtext(12, " Thanks ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("active", ctx_r0.showReactionPopup);
    i0.ɵɵadvance(4);
    i0.ɵɵclassProp("active", ctx_r0.isSupport);
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("active", ctx_r0.isUseful);
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("active", ctx_r0.isThanks);
} }
function AddReactionsComponent_div_1_Template(rf, ctx) { if (rf & 1) {
    const _r11 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 9);
    i0.ɵɵlistener("mouseover", function AddReactionsComponent_div_1_Template_div_mouseover_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return ctx_r10.onMouseOverList(); })("mouseleave", function AddReactionsComponent_div_1_Template_div_mouseleave_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r12 = i0.ɵɵnextContext(); return ctx_r12.onMouseLeaveList(); })("clickOutside", function AddReactionsComponent_div_1_Template_div_clickOutside_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r13 = i0.ɵɵnextContext(); return ctx_r13.showReactionListPopup && ctx_r13.onClickReactionList(false); })("click", function AddReactionsComponent_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r14 = i0.ɵɵnextContext(); return !ctx_r14.showReactionListPopup && ctx_r14.onClickReactionList(true); });
    i0.ɵɵelementStart(1, "div", 10);
    i0.ɵɵelement(2, "div", 11);
    i0.ɵɵelement(3, "div", 12);
    i0.ɵɵelement(4, "div", 13);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "div", 14);
    i0.ɵɵelementStart(7, "div", 15);
    i0.ɵɵelement(8, "i", 11);
    i0.ɵɵtext(9);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(10, "div", 15);
    i0.ɵɵelement(11, "i", 12);
    i0.ɵɵtext(12);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(13, "div", 15);
    i0.ɵɵelement(14, "i", 13);
    i0.ɵɵtext(15);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("active", ctx_r1.showReactionListPopup);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate1(" ", ((ctx_r1.support == null ? null : ctx_r1.support.length) || 0) + ((ctx_r1.thanks == null ? null : ctx_r1.thanks.length) || 0) + ((ctx_r1.useful == null ? null : ctx_r1.useful.length) || 0), " ");
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate1(" Support (", (ctx_r1.support == null ? null : ctx_r1.support.length) || 0, ") ");
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" Useful (", (ctx_r1.useful == null ? null : ctx_r1.useful.length) || 0, ") ");
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" Thanks (", (ctx_r1.thanks == null ? null : ctx_r1.thanks.length) || 0, ") ");
} }
export class AddReactionsComponent {
    constructor() {
        this.showReactions = false;
        this.showAddReactions = false;
        this.isMobile = false;
        this.support = [];
        this.thanks = [];
        this.useful = [];
        this.reactions = [];
        this.userNickName = '';
        this.toggleReaction = new EventEmitter();
        this.reaction = Reaction;
        this.isThanks = false;
        this.isSupport = false;
        this.isUseful = false;
        this.showReactionPopup = false;
        this.showReactionListPopup = false;
        this.CallingComponent = CallingComponent;
    }
    ngOnInit() {
        var _a;
        if ((_a = this.reactions) === null || _a === void 0 ? void 0 : _a.length) {
            this.mapReactions();
            this.checkIsReactionSelected();
        }
    }
    ngOnChanges() {
        var _a;
        this.dismissReactionsPopup();
        if ((_a = this.reactions) === null || _a === void 0 ? void 0 : _a.length) {
            this.mapReactions();
        }
        this.checkIsReactionSelected();
    }
    onToggleReaction(reaction) {
        this.toggleReaction.emit(reaction);
    }
    isReactionSelected(userNickName, ...reactionsList) {
        return reactionsList.map(reaction => (reaction.some(x => (x === null || x === void 0 ? void 0 : x.nickname) == userNickName)));
    }
    onClickReaction(value) {
        if (this.isMobile) {
            this.showReactionPopup = value;
        }
    }
    onClickReactionList(value) {
        if (this.isMobile) {
            this.showReactionListPopup = value;
        }
    }
    dismissReactionsPopup() {
        this.showReactionPopup = false;
    }
    onMouseOver() {
        if (!this.showReactionPopup) {
            this.showReactionPopup = true;
        }
    }
    onMouseLeave() {
        if (this.showReactionPopup) {
            this.showReactionPopup = false;
        }
    }
    onMouseOverList() {
        if (!this.showReactionListPopup) {
            this.showReactionListPopup = true;
        }
    }
    onMouseLeaveList() {
        if (this.showReactionListPopup) {
            this.showReactionListPopup = false;
        }
    }
    mapReactions() {
        const reactions = this.reactions;
        this.support = this.getMemberReactions(reactions, GReactionType.Support);
        this.useful = this.getMemberReactions(reactions, GReactionType.Useful);
        this.thanks = this.getMemberReactions(reactions, GReactionType.Thanks);
    }
    getMemberReactions(reactions, filter) {
        var _a;
        const memberReactions = [];
        (_a = reactions === null || reactions === void 0 ? void 0 : reactions.filter(reaction => (reaction === null || reaction === void 0 ? void 0 : reaction.type) === filter)) === null || _a === void 0 ? void 0 : _a.forEach((reaction, index) => {
            const mappedReactions = Array(reaction === null || reaction === void 0 ? void 0 : reaction.count)
                .fill(reaction)
                .map((_, i) => {
                var _a;
                return ({
                    nickname: (reaction === null || reaction === void 0 ? void 0 : reaction.reacted_by_me) ? this.userNickName : (_a = reaction === null || reaction === void 0 ? void 0 : reaction.nicknames) === null || _a === void 0 ? void 0 : _a[i],
                    ts: 0,
                });
            });
            memberReactions.push(...mappedReactions);
        });
        return memberReactions;
    }
    checkIsReactionSelected() {
        [this.isThanks, this.isSupport, this.isUseful] = this.isReactionSelected(this.userNickName, this.thanks, this.support, this.useful);
    }
}
AddReactionsComponent.ɵfac = function AddReactionsComponent_Factory(t) { return new (t || AddReactionsComponent)(); };
AddReactionsComponent.ɵcmp = i0.ɵɵdefineComponent({ type: AddReactionsComponent, selectors: [["ins-add-reactions"]], inputs: { showReactions: "showReactions", showAddReactions: "showAddReactions", isMobile: "isMobile", support: "support", thanks: "thanks", useful: "useful", reactions: "reactions", userNickName: "userNickName", callingComponent: "callingComponent" }, outputs: { toggleReaction: "toggleReaction" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["class", "add-reaction-block", "id", "add-reaction-block", 3, "active", "mouseover", "mouseleave", "clickOutside", "click", 4, "ngIf"], ["class", "reaction-response-block", 3, "active", "mouseover", "mouseleave", "clickOutside", "click", 4, "ngIf"], ["id", "add-reaction-block", 1, "add-reaction-block", 3, "mouseover", "mouseleave", "clickOutside", "click"], [1, "arb-btn"], [1, "arb-menu"], [1, "arb-emote", 3, "click"], [1, "arb-icon", "icn-heart"], [1, "arb-icon", "icn-check"], [1, "arb-icon", "icn-like"], [1, "reaction-response-block", 3, "mouseover", "mouseleave", "clickOutside", "click"], [1, "rrb-btn"], [1, "rrb-icon", "icn-heart"], [1, "rrb-icon", "icn-check"], [1, "rrb-icon", "icn-like"], [1, "rrb-menu"], [1, "rrb-emote"]], template: function AddReactionsComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵtemplate(0, AddReactionsComponent_div_0_Template, 13, 8, "div", 0);
        i0.ɵɵtemplate(1, AddReactionsComponent_div_1_Template, 16, 6, "div", 1);
    } if (rf & 2) {
        i0.ɵɵproperty("ngIf", ctx.callingComponent === ctx.CallingComponent.MemberDashboard || ctx.showAddReactions);
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngIf", ctx.showReactions);
    } }, directives: [i1.NgIf, i2.ClickOutsideDirective], styles: ["a[_ngcontent-%COMP%]{text-decoration:none}*[_ngcontent-%COMP%]{font-family:Lato,sans-serif;outline:0}@font-face{font-family:ins-icons;src:url(/assets/fonts/icons/ins-icons.ttf?nf14g1) format(\"truetype\"),url(/assets/fonts/icons/ins-icons.woff?nf14g1) format(\"woff\"),url(/assets/fonts/icons/ins-icons.svg?nf14g1#ins-icons) format(\"svg\");font-weight:400;font-style:normal;font-display:block}.arb-btn[_ngcontent-%COMP%]:before, .ins-icon[_ngcontent-%COMP%], [class*=\" icn-\"][_ngcontent-%COMP%], [class^=icn-][_ngcontent-%COMP%]{font-family:ins-icons!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icn-minus-o[_ngcontent-%COMP%]:before{content:\"\\e93a\"}.icn-disclaimer[_ngcontent-%COMP%]:before{content:\"\\e934\"}.icn-leave-community[_ngcontent-%COMP%]:before{content:\"\\e935\"}.icn-stethoscope[_ngcontent-%COMP%]:before{content:\"\\e936\"}.icn-join-community[_ngcontent-%COMP%]:before{content:\"\\e937\"}.icn-resources[_ngcontent-%COMP%]:before{content:\"\\e938\"}.icn-help[_ngcontent-%COMP%]:before{content:\"\\e939\"}.icn-checked[_ngcontent-%COMP%]:before{content:\"\\e933\"}.icn-plus[_ngcontent-%COMP%]:before{content:\"\\e932\"}.icn-expand[_ngcontent-%COMP%]:before{content:\"\\e931\"}.icn-Invite[_ngcontent-%COMP%]:before{content:\"\\e930\"}.icn-report[_ngcontent-%COMP%]:before{content:\"\\e92f\"}.icn-unfollow[_ngcontent-%COMP%]:before{content:\"\\e92e\"}.icn-block[_ngcontent-%COMP%]:before{content:\"\\e92d\"}.icn-trash[_ngcontent-%COMP%]:before{content:\"\\e92b\"}.icn-follow[_ngcontent-%COMP%]:before{content:\"\\e92c\"}.icn-lock[_ngcontent-%COMP%]:before{content:\"\\e92a\"}.icn-bolt-left[_ngcontent-%COMP%]:before{content:\"\\e925\"}.icn-bolt-right[_ngcontent-%COMP%]:before{content:\"\\e926\"}.icn-bolt-down[_ngcontent-%COMP%]:before{content:\"\\e927\"}.icn-bolt-up[_ngcontent-%COMP%]:before{content:\"\\e928\"}.icn-img-o[_ngcontent-%COMP%]:before{content:\"\\e929\"}.icn-tick[_ngcontent-%COMP%]:before{content:\"\\e924\"}.icn-tick-o[_ngcontent-%COMP%]:before{content:\"\\e923\"}.icn-cross-o[_ngcontent-%COMP%]:before{content:\"\\e922\"}.icn-plus-o[_ngcontent-%COMP%]:before{content:\"\\e921\"}.icn-hide[_ngcontent-%COMP%]:before{content:\"\\e920\"}.icn-menu[_ngcontent-%COMP%]:before{content:\"\\e900\"}.icn-more[_ngcontent-%COMP%]:before{content:\"\\e901\"}.icn-msgs[_ngcontent-%COMP%]:before{content:\"\\e902\"}.icn-pin[_ngcontent-%COMP%]:before{content:\"\\e903\"}.icn-reply[_ngcontent-%COMP%]:before{content:\"\\e904\"}.icn-search[_ngcontent-%COMP%]:before{content:\"\\e905\"}.icn-settings[_ngcontent-%COMP%]:before{content:\"\\e906\"}.icn-treatment[_ngcontent-%COMP%]:before{content:\"\\e907\"}.icn-aid[_ngcontent-%COMP%]:before{content:\"\\e908\"}.icn-apple[_ngcontent-%COMP%]:before{content:\"\\e909\"}.icn-arrow-down[_ngcontent-%COMP%]:before{content:\"\\e90a\"}.icn-arrow-up[_ngcontent-%COMP%]:before{content:\"\\e91d\"}.icn-arrow-left[_ngcontent-%COMP%]:before{content:\"\\e91e\"}.icn-arrow-right[_ngcontent-%COMP%]:before{content:\"\\e91f\"}.icn-bell[_ngcontent-%COMP%]:before{content:\"\\e90b\"}.icn-bookmark-o[_ngcontent-%COMP%]:before{content:\"\\e90c\"}.icn-calendar[_ngcontent-%COMP%]:before{content:\"\\e90d\"}.icn-check[_ngcontent-%COMP%]:before{content:\"\\e90e\"}.icn-community[_ngcontent-%COMP%]:before{content:\"\\e90f\"}.icn-d-arrow-up[_ngcontent-%COMP%]:before{content:\"\\e910\"}.icn-discussion[_ngcontent-%COMP%]:before{content:\"\\e911\"}.icn-edit[_ngcontent-%COMP%]:before{content:\"\\e912\"}.icn-facebook[_ngcontent-%COMP%]:before{content:\"\\e913\"}.icn-filters[_ngcontent-%COMP%]:before{content:\"\\e914\"}.icn-friends[_ngcontent-%COMP%]:before{content:\"\\e915\"}.icn-google[_ngcontent-%COMP%]:before{content:\"\\e916\"}.icn-heart[_ngcontent-%COMP%]:before{content:\"\\e917\"}.icn-home[_ngcontent-%COMP%]:before{content:\"\\e918\"}.icn-img[_ngcontent-%COMP%]:before{content:\"\\e919\"}.icn-inspire[_ngcontent-%COMP%]:before{content:\"\\e91a\"}.icn-journal[_ngcontent-%COMP%]:before{content:\"\\e91b\"}.arb-btn[_ngcontent-%COMP%]:before, .icn-like[_ngcontent-%COMP%]:before{content:\"\\e91c\"}[_nghost-%COMP%]{display:flex;align-items:center;justify-content:space-between;flex:1 1 auto}.add-reaction-block[_ngcontent-%COMP%]{position:relative;flex:0 0 auto}.add-reaction-block.active[_ngcontent-%COMP%]   .arb-menu[_ngcontent-%COMP%]{visibility:visible;opacity:1;transform:translateX(-50%) translateY(0);transition:.1s linear}.arb-btn[_ngcontent-%COMP%]{font-size:.75rem;color:#000;display:flex;align-items:center;font-weight:700;cursor:pointer}.arb-btn[_ngcontent-%COMP%]:before{font-size:.875rem;margin-right:.3125rem;color:#009dfc}.arb-menu[_ngcontent-%COMP%]{position:absolute;z-index:1;background:#fff;bottom:100%;border:1px solid #e2e5e4;border-radius:.5rem;min-width:10rem;box-shadow:0 .125rem .3125rem 0 rgba(208,208,208,.5);display:flex;align-items:center;color:#000;font-size:.75rem;padding:5px 10px;left:50%;transform:translateX(-50%) translateY(20px);margin-bottom:.625rem;visibility:hidden;opacity:0;transition:.1s ease-in-out .5s}@media (max-width:767px){.add-reaction-block.active[_ngcontent-%COMP%]   .arb-menu[_ngcontent-%COMP%]{transform:translateX(0) translateY(0)}.arb-menu[_ngcontent-%COMP%]{transform:translateX(0) translateY(20px);left:0}}.arb-emote[_ngcontent-%COMP%]{display:flex;align-items:center;cursor:pointer;white-space:nowrap}.arb-emote[_ngcontent-%COMP%]:not(:first-child){margin-left:.625rem}.arb-emote.active[_ngcontent-%COMP%]   .arb-icon[_ngcontent-%COMP%], .arb-emote[_ngcontent-%COMP%]:hover   .arb-icon[_ngcontent-%COMP%]{color:#fff}.arb-emote.active[_ngcontent-%COMP%]   .icn-heart[_ngcontent-%COMP%], .arb-emote[_ngcontent-%COMP%]:hover   .icn-heart[_ngcontent-%COMP%]{background:#dd002e}.arb-emote.active[_ngcontent-%COMP%]   .icn-check[_ngcontent-%COMP%], .arb-emote[_ngcontent-%COMP%]:hover   .icn-check[_ngcontent-%COMP%]{background:#061a73}.arb-emote.active[_ngcontent-%COMP%]   .arb-btn[_ngcontent-%COMP%], .arb-emote.active[_ngcontent-%COMP%]   .icn-like[_ngcontent-%COMP%], .arb-emote[_ngcontent-%COMP%]:hover   .arb-btn[_ngcontent-%COMP%], .arb-emote[_ngcontent-%COMP%]:hover   .icn-like[_ngcontent-%COMP%]{background:#09b0d3}.arb-icon[_ngcontent-%COMP%]{color:#c7cdcb;margin-right:.1875rem}.reaction-response-block[_ngcontent-%COMP%]{position:relative;flex:0 0 auto;margin-left:auto}.reaction-response-block.active[_ngcontent-%COMP%]   .rrb-menu[_ngcontent-%COMP%]{visibility:visible;opacity:1;transform:translateY(0);transition:.1s linear}.rrb-btn[_ngcontent-%COMP%]{margin-left:auto;display:flex;align-items:center;font-size:.75rem;font-weight:700}.rrb-icon[_ngcontent-%COMP%]{color:#fff}.rrb-icon[_ngcontent-%COMP%]:not(:first-child){margin-left:-.625rem}.rrb-icon[_ngcontent-%COMP%]:last-child{margin-right:.5rem}.rrb-icon.icn-heart[_ngcontent-%COMP%]{background:#dd002e}.rrb-icon.icn-check[_ngcontent-%COMP%]{background:#061a73}.rrb-icon.arb-btn[_ngcontent-%COMP%], .rrb-icon.icn-like[_ngcontent-%COMP%]{background:#09b0d3}.arb-icon[_ngcontent-%COMP%], .rrb-icon[_ngcontent-%COMP%]{width:1.75rem;height:1.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.875rem;flex:0 0 auto}.rrb-menu[_ngcontent-%COMP%]{position:absolute;z-index:1;background:#fff;top:100%;border:1px solid #e2e5e4;border-radius:.5rem;box-shadow:0 .125rem .3125rem 0 rgba(208,208,208,.5);display:block;color:#000;font-size:.75rem;padding:10px;right:0;margin-top:.625rem;transform:translateY(-20px);visibility:hidden;opacity:0;transition:.1s ease-in-out .5s}.rrb-emote[_ngcontent-%COMP%]{display:flex;align-items:center;white-space:nowrap}.rrb-emote[_ngcontent-%COMP%]:not(:first-child){margin-top:.625rem}.rrb-emote[_ngcontent-%COMP%]   .rrb-icon[_ngcontent-%COMP%]{margin-left:0}"] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AddReactionsComponent, [{
        type: Component,
        args: [{
                selector: 'ins-add-reactions',
                templateUrl: './add-reactions.component.html',
                styleUrls: ['./add-reactions.component.scss']
            }]
    }], function () { return []; }, { showReactions: [{
            type: Input
        }], showAddReactions: [{
            type: Input
        }], isMobile: [{
            type: Input
        }], support: [{
            type: Input
        }], thanks: [{
            type: Input
        }], useful: [{
            type: Input
        }], reactions: [{
            type: Input
        }], userNickName: [{
            type: Input
        }], callingComponent: [{
            type: Input
        }], toggleReaction: [{
            type: Output
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 