import { Component, ViewEncapsulation } from '@angular/core';
import { select } from '@ngrx/store';
import * as fromSelectors from '../../../../store/selectors/tag.selectors';
import * as fromActions from '../../../../store/actions/tag.actions';
import { UntypedFormControl } from '@angular/forms';
import { auditTime, tap } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@ngrx/store";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/common";
import * as i4 from "@angular/router";
import * as i5 from "rpx-xui-translation";
import * as i6 from "../../../pipes/filter/filter.pipe";
import * as i7 from "../../../pipes/unsnake/unsnake.pipe";
export class CommentFilterComponent {
    constructor(store, fb) {
        this.store = store;
        this.fb = fb;
        this.isPreview = false;
    }
    ngOnInit() {
        this.tagGroup = this.fb.group({
            'tagFilters': this.fb.group({}),
        });
        this.filter$ = this.store.pipe(select(fromSelectors.getTagFilters));
        this.$subscriptions = this.tagGroup.valueChanges.pipe(auditTime(5)).subscribe(value => {
            const tagFilters = value['tagFilters'];
            this.store.dispatch(new fromActions.AddFilterTags(tagFilters));
        });
        this.buildFrom();
    }
    buildFrom() {
        const checkboxes = this.tagGroup.get('tagFilters');
        this.allTags$ = this.store.pipe(select(fromSelectors.getAllTagsArr)).pipe(tap(tags => {
            this.tagGroup.reset();
            tags.forEach((value) => {
                checkboxes.addControl(value.key, new UntypedFormControl(false));
            });
        }));
    }
    onClearFilters() {
        this.tagGroup.reset();
        this.store.dispatch(new fromActions.ClearFilterTags());
    }
    ngOnDestroy() {
        this.$subscriptions.unsubscribe();
    }
    onRemoveFilter(tagName) {
        const checkboxes = this.tagGroup.get('tagFilters');
        checkboxes.controls[tagName].setValue(false);
    }
    onToggleFilterView() {
        this.isPreview = !this.isPreview;
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentFilterComponent, deps: [{ token: i1.Store }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CommentFilterComponent, selector: "mv-comment-filter", ngImport: i0, template: "<div class=\"comment-filter\">\n  <div class=\"hmcts-filter__content\">\n    <div class=\"hmcts-filter__toggle-filters\">\n      <p\n        class=\"hmcts-filter__toggle-filters-link\"\n        [ngClass]=\"{ 'govuk-accordion__section--expanded': isPreview }\"\n        (click)=\"onToggleFilterView()\"\n      >\n        <strong>{{ \"Filter options\" | rpxTranslate }}</strong\n        ><span class=\"govuk-accordion__icon\"></span>\n      </p>\n    </div>\n\n    <ng-container *ngIf=\"filter$ | async as filters\">\n      <div class=\"hmcts-filter__selected-heading\" *ngIf=\"filters.length\">\n        <div class=\"hmcts-filter__heading-action\">\n          <p>\n            <a\n              (click)=\"onClearFilters()\"\n              class=\"govuk-link govuk-link--no-visited-state\"\n              [routerLink]=\"[]\"\n              >{{ \"Clear filters\" | rpxTranslate }}</a\n            >\n          </p>\n        </div>\n      </div>\n\n      <h4\n        class=\"govuk-heading-s govuk-!-margin-bottom-0\"\n        *ngIf=\"filters.length\"\n      >\n        {{ \"Tag filters\" | rpxTranslate }}\n      </h4>\n\n      <ul class=\"hmcts-filter-tags\" *ngIf=\"filters.length\">\n        <li *ngFor=\"let tagName of filters\">\n          <a\n            class=\"hmcts-filter__tag\"\n            [routerLink]=\"[]\"\n            (click)=\"onRemoveFilter(tagName)\"\n          >\n            <span class=\"govuk-visually-hidden\">{{\n              \"Remove this filter\" | rpxTranslate\n            }}</span\n            >{{ tagName | unsnake }}</a\n          >\n        </li>\n      </ul>\n    </ng-container>\n\n    <div class=\"hmcts-filter__options\" [ngClass]=\"{ isVisible: isPreview }\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-label--s\" for=\"keywords\">\n          {{ \"Search Tags\" | rpxTranslate }}\n        </label>\n        <input\n          class=\"govuk-input\"\n          id=\"keywords\"\n          name=\"keywords\"\n          type=\"text\"\n          [ngModel]=\"searchValue\"\n          (ngModelChange)=\"searchValue = $event\"\n        />\n      </div>\n\n      <div class=\"govuk-form-group\">\n        <div [formGroup]=\"tagGroup\">\n          <fieldset class=\"govuk-fieldset\" formGroupName=\"tagFilters\">\n            <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n              Tags\n            </legend>\n            <div class=\"govuk-checkboxes--scroll\">\n              <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                <div\n                  class=\"govuk-checkboxes__item\"\n                  *ngFor=\"\n                    let item of allTags$ | async | filter : searchValue : 'key'\n                  \"\n                >\n                  <input\n                    [formControlName]=\"item.key\"\n                    [id]=\"item.key\"\n                    class=\"govuk-checkboxes__input\"\n                    [value]=\"false\"\n                    [attr.aria-describedby]=\"item.key\"\n                    type=\"checkbox\"\n                  />\n                  <label\n                    class=\"govuk-label govuk-checkboxes__label\"\n                    [for]=\"item.key\"\n                  >\n                    {{ item.key | unsnake }} ({{ item.length }})\n                  </label>\n                </div>\n              </div>\n            </div>\n          </fieldset>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }, { kind: "pipe", type: i6.FilterPipe, name: "filter" }, { kind: "pipe", type: i7.UnsnakePipe, name: "unsnake" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentFilterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mv-comment-filter', encapsulation: ViewEncapsulation.None, template: "<div class=\"comment-filter\">\n  <div class=\"hmcts-filter__content\">\n    <div class=\"hmcts-filter__toggle-filters\">\n      <p\n        class=\"hmcts-filter__toggle-filters-link\"\n        [ngClass]=\"{ 'govuk-accordion__section--expanded': isPreview }\"\n        (click)=\"onToggleFilterView()\"\n      >\n        <strong>{{ \"Filter options\" | rpxTranslate }}</strong\n        ><span class=\"govuk-accordion__icon\"></span>\n      </p>\n    </div>\n\n    <ng-container *ngIf=\"filter$ | async as filters\">\n      <div class=\"hmcts-filter__selected-heading\" *ngIf=\"filters.length\">\n        <div class=\"hmcts-filter__heading-action\">\n          <p>\n            <a\n              (click)=\"onClearFilters()\"\n              class=\"govuk-link govuk-link--no-visited-state\"\n              [routerLink]=\"[]\"\n              >{{ \"Clear filters\" | rpxTranslate }}</a\n            >\n          </p>\n        </div>\n      </div>\n\n      <h4\n        class=\"govuk-heading-s govuk-!-margin-bottom-0\"\n        *ngIf=\"filters.length\"\n      >\n        {{ \"Tag filters\" | rpxTranslate }}\n      </h4>\n\n      <ul class=\"hmcts-filter-tags\" *ngIf=\"filters.length\">\n        <li *ngFor=\"let tagName of filters\">\n          <a\n            class=\"hmcts-filter__tag\"\n            [routerLink]=\"[]\"\n            (click)=\"onRemoveFilter(tagName)\"\n          >\n            <span class=\"govuk-visually-hidden\">{{\n              \"Remove this filter\" | rpxTranslate\n            }}</span\n            >{{ tagName | unsnake }}</a\n          >\n        </li>\n      </ul>\n    </ng-container>\n\n    <div class=\"hmcts-filter__options\" [ngClass]=\"{ isVisible: isPreview }\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-label--s\" for=\"keywords\">\n          {{ \"Search Tags\" | rpxTranslate }}\n        </label>\n        <input\n          class=\"govuk-input\"\n          id=\"keywords\"\n          name=\"keywords\"\n          type=\"text\"\n          [ngModel]=\"searchValue\"\n          (ngModelChange)=\"searchValue = $event\"\n        />\n      </div>\n\n      <div class=\"govuk-form-group\">\n        <div [formGroup]=\"tagGroup\">\n          <fieldset class=\"govuk-fieldset\" formGroupName=\"tagFilters\">\n            <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n              Tags\n            </legend>\n            <div class=\"govuk-checkboxes--scroll\">\n              <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                <div\n                  class=\"govuk-checkboxes__item\"\n                  *ngFor=\"\n                    let item of allTags$ | async | filter : searchValue : 'key'\n                  \"\n                >\n                  <input\n                    [formControlName]=\"item.key\"\n                    [id]=\"item.key\"\n                    class=\"govuk-checkboxes__input\"\n                    [value]=\"false\"\n                    [attr.aria-describedby]=\"item.key\"\n                    type=\"checkbox\"\n                  />\n                  <label\n                    class=\"govuk-label govuk-checkboxes__label\"\n                    [for]=\"item.key\"\n                  >\n                    {{ item.key | unsnake }} ({{ item.length }})\n                  </label>\n                </div>\n              </div>\n            </div>\n          </fieldset>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.UntypedFormBuilder }] });
//# sourceMappingURL=data:application/json;base64, 