import { Component, Input, ViewChild } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { combineLatest } from 'rxjs';
import { select } from '@ngrx/store';
import * as fromSelectors from '../../store/selectors/annotation.selectors';
import * as fromAnnoActions from '../../store/actions/annotation.actions';
import * as fromTagSelectors from '../../store/selectors/tag.selectors';
import * as i0 from "@angular/core";
import * as i1 from "@ngrx/store";
import * as i2 from "../../print.service";
import * as i3 from "../../toolbar/toolbar-event.service";
import * as i4 from "@angular/forms";
import * as i5 from "@angular/cdk/a11y";
import * as i6 from "@angular/common";
import * as i7 from "@angular/router";
import * as i8 from "@swimlane/ngx-datatable";
import * as i9 from "../../shared/gov-uk-date/gov-uk-date.component";
import * as i10 from "../../shared/gov-uk-fieldset/gov-uk-fieldset.component";
import * as i11 from "rpx-xui-translation";
import * as i12 from "../pipes/unsnake/unsnake.pipe";
export class CommentsSummaryComponent {
    constructor(store, printService, toolbarEvents, fb) {
        this.store = store;
        this.printService = printService;
        this.toolbarEvents = toolbarEvents;
        this.fb = fb;
        this.showFilters = false;
        this.hasFilter = false;
        this.fromFilterValid = true;
        this.toFilterValid = true;
    }
    ngOnInit() {
        this.filtersFg = this.fb.group({
            dateRangeFrom: new FormGroup({
                day: new FormControl('', [Validators.required]),
                month: new FormControl('', [Validators.required]),
                year: new FormControl('', [Validators.required])
            }),
            dateRangeTo: new FormGroup({
                day: new FormControl('', [Validators.required]),
                month: new FormControl('', [Validators.required]),
                year: new FormControl('', [Validators.required])
            }),
            tagFilters: this.fb.group({}),
        });
        this.comments$ = this.store.pipe(select(fromSelectors.getCommentSummary));
        this.buildCheckBoxForm();
        this.container.nativeElement.focus();
    }
    buildCheckBoxForm() {
        this.filtersFg.reset();
        const checkboxes = this.filtersFg.get('tagFilters');
        const filters$ = this.store.pipe(select(fromSelectors.getCommentSummaryFilters));
        this.allTags$ = this.store.pipe(select(fromTagSelectors.getAllTagsArr));
        this.$subscriptions = combineLatest([this.allTags$, filters$]).subscribe(([tags, filters]) => {
            this.hasFilter = filters.hasFilter;
            tags.forEach((val) => {
                const checkBoxValue = (filters.filters.tagFilters &&
                    filters.filters.tagFilters.hasOwnProperty(val.key)) ?
                    filters.filters.tagFilters[val.key] : false;
                checkboxes.addControl(val.key, new FormControl(checkBoxValue));
            });
            this.filtersFg.updateValueAndValidity();
        });
    }
    onClearFilters() {
        this.store.dispatch(new fromAnnoActions.ClearCommentSummaryFilters());
        this.buildCheckBoxForm();
    }
    onFilter() {
        const { value } = this.filtersFg;
        const hasDateFrom = (value.dateRangeFrom.year && value.dateRangeFrom.month && value.dateRangeFrom.day);
        const hasDateTo = (value.dateRangeTo.year && value.dateRangeTo.month && value.dateRangeTo.day);
        const dateRangeFrom = hasDateFrom ?
            new Date(value.dateRangeFrom.year, value.dateRangeFrom.month - 1, value.dateRangeFrom.day).getTime() : null;
        const dateRangeTo = hasDateTo ?
            new Date(value.dateRangeTo.year, value.dateRangeTo.month - 1, value.dateRangeTo.day).getTime() : null;
        this.fromFilterValid = hasDateFrom ? true : false;
        this.toFilterValid = hasDateTo ? true : false;
        if (this.filtersFg.valid) {
            this.store.dispatch(new fromAnnoActions.ApplyCommentSymmaryFilter({ ...value, dateRangeFrom, dateRangeTo }));
        }
    }
    onFiltersToggle() {
        this.showFilters = !this.showFilters;
    }
    onClose() {
        this.toolbarEvents.toggleCommentsSummary(false);
    }
    onPrint() {
        this.printService.printElementNatively(this.commentsTable.nativeElement, 1000, 900);
    }
    navigateToPage(pageNumber) {
        if (this.contentType === 'pdf') {
            this.toolbarEvents.setPage(pageNumber);
        }
        this.toolbarEvents.toggleCommentsSummary(false);
        this.toolbarEvents.toggleCommentsPanel(true);
    }
    ngOnDestroy() {
        this.$subscriptions.unsubscribe();
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentsSummaryComponent, deps: [{ token: i1.Store }, { token: i2.PrintService }, { token: i3.ToolbarEventService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CommentsSummaryComponent, selector: "mv-comments-summary", inputs: { title: "title", contentType: "contentType" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["outerContainer"], descendants: true, static: true }, { propertyName: "commentsTable", first: true, predicate: ["commentContainer"], descendants: true }], ngImport: i0, template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onClose()\">\n  <div\n    #outerContainer\n    id=\"modal\"\n    class=\"modal-content govuk-width-container clearfix\"\n    (click)=\"$event.stopPropagation()\"\n    cdkTrapFocus\n    tabindex=\"0\"\n  >\n    <div id=\"comment-container\" class=\"comment-container\" #commentContainer>\n      <h2 class=\"govuk-heading-m\">{{ title }}</h2>\n      <ng-container *ngIf=\"comments$ | async as comments\">\n        <ng-container *ngIf=\"comments.length\">\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-!-margin-right-1\"\n            (click)=\"onFiltersToggle()\"\n          >\n            {{\n              !showFilters\n                ? (\"Show Filters\" | rpxTranslate)\n                : (\"Hide Filters\" | rpxTranslate)\n            }}\n          </button>\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"onClearFilters()\"\n            *ngIf=\"hasFilter\"\n          >\n            {{ \"Clear Filters\" | rpxTranslate }}\n          </button>\n          <ng-container *ngIf=\"showFilters\">\n            <form [formGroup]=\"filtersFg\" (ngSubmit)=\"onFilter()\">\n              <div class=\"dates\">\n                <div class=\"dates__from\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeFrom', legend: 'From' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeFrom']\"\n                    [errorMessage]=\"{\n                      isInvalid: !fromFilterValid,\n                      messages: ['From date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__to\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeTo', legend: 'To' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeTo']\"\n                    [errorMessage]=\"{\n                      isInvalid: !toFilterValid,\n                      messages: ['To date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__tags\">\n                  <mv-gov-uk-fieldset\n                    [config]=\"{\n                      legend: 'Tags',\n                      classes: 'govuk-label--m',\n                      id: 'filters'\n                    }\"\n                    [isHeading]=\"false\"\n                  >\n                    <div\n                      class=\"govuk-checkboxes--scroll\"\n                      [formGroup]=\"filtersFg.controls['tagFilters']\"\n                    >\n                      <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                        <div\n                          class=\"govuk-checkboxes__item\"\n                          *ngFor=\"let item of allTags$ | async\"\n                        >\n                          <input\n                            [formControlName]=\"item.key\"\n                            class=\"govuk-checkboxes__input\"\n                            [value]=\"false\"\n                            type=\"checkbox\"\n                          />\n                          <label class=\"govuk-label govuk-checkboxes__label\">\n                            {{ item.key | unsnake }} ({{ item.length }})\n                          </label>\n                        </div>\n                      </div>\n                    </div>\n                  </mv-gov-uk-fieldset>\n                </div>\n                <div class=\"dates__cta\">\n                  <button type=\"submit\" class=\"govuk-button\">\n                    {{ \"Filter comments\" | rpxTranslate }}\n                  </button>\n                </div>\n              </div>\n            </form>\n          </ng-container>\n          <ng-container *ngIf=\"comments[0]\">\n            <ngx-datatable\n              [rows]=\"comments\"\n              rowHeight=\"auto\"\n              headerHeight=\"auto\"\n              [columnMode]=\"'flex'\"\n              [sorts]=\"[{ prop: 'date', dir: 'desc' }]\"\n            >\n              <ngx-datatable-column\n                name=\"{{ 'User' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Page' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <a\n                    [routerLink]=\"[]\"\n                    class=\"comment-summary_pages\"\n                    (click)=\"navigateToPage(value)\"\n                    >{{ value }}</a\n                  >\n                </ng-template>\n              </ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Date' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Comment' | rpxTranslate }}\"\n                [flexGrow]=\"3\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Tags' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <span class=\"hmcts-badge\" *ngFor=\"let tag of value\">{{\n                    tag.label\n                  }}</span>\n                </ng-template>\n              </ngx-datatable-column>\n            </ngx-datatable>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!comments[0]\">\n          <h3 class=\"govuk-heading-s\">\n            {{\n              \"No comments available. Select text to add a highlight or comment.\"\n                | rpxTranslate\n            }}\n          </h3>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"button-container\">\n      <button (click)=\"onPrint()\" class=\"govuk-button govuk-button--secondary\">\n        {{ \"Print\" | rpxTranslate }}\n      </button>\n      <button id=\"modal-close-button\" (click)=\"onClose()\" class=\"govuk-button\">\n        {{ \"Close\" | rpxTranslate }}\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i8.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { kind: "directive", type: i8.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: i9.GovUkDateComponent, selector: "mv-gov-uk-date", inputs: ["config", "errorMessage", "formGroup"] }, { kind: "component", type: i10.GovUkFieldsetComponent, selector: "mv-gov-uk-fieldset", inputs: ["config", "isHeading", "errorMessage"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.RpxTranslatePipe, name: "rpxTranslate" }, { kind: "pipe", type: i12.UnsnakePipe, name: "unsnake" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentsSummaryComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mv-comments-summary', template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onClose()\">\n  <div\n    #outerContainer\n    id=\"modal\"\n    class=\"modal-content govuk-width-container clearfix\"\n    (click)=\"$event.stopPropagation()\"\n    cdkTrapFocus\n    tabindex=\"0\"\n  >\n    <div id=\"comment-container\" class=\"comment-container\" #commentContainer>\n      <h2 class=\"govuk-heading-m\">{{ title }}</h2>\n      <ng-container *ngIf=\"comments$ | async as comments\">\n        <ng-container *ngIf=\"comments.length\">\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-!-margin-right-1\"\n            (click)=\"onFiltersToggle()\"\n          >\n            {{\n              !showFilters\n                ? (\"Show Filters\" | rpxTranslate)\n                : (\"Hide Filters\" | rpxTranslate)\n            }}\n          </button>\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"onClearFilters()\"\n            *ngIf=\"hasFilter\"\n          >\n            {{ \"Clear Filters\" | rpxTranslate }}\n          </button>\n          <ng-container *ngIf=\"showFilters\">\n            <form [formGroup]=\"filtersFg\" (ngSubmit)=\"onFilter()\">\n              <div class=\"dates\">\n                <div class=\"dates__from\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeFrom', legend: 'From' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeFrom']\"\n                    [errorMessage]=\"{\n                      isInvalid: !fromFilterValid,\n                      messages: ['From date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__to\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeTo', legend: 'To' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeTo']\"\n                    [errorMessage]=\"{\n                      isInvalid: !toFilterValid,\n                      messages: ['To date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__tags\">\n                  <mv-gov-uk-fieldset\n                    [config]=\"{\n                      legend: 'Tags',\n                      classes: 'govuk-label--m',\n                      id: 'filters'\n                    }\"\n                    [isHeading]=\"false\"\n                  >\n                    <div\n                      class=\"govuk-checkboxes--scroll\"\n                      [formGroup]=\"filtersFg.controls['tagFilters']\"\n                    >\n                      <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                        <div\n                          class=\"govuk-checkboxes__item\"\n                          *ngFor=\"let item of allTags$ | async\"\n                        >\n                          <input\n                            [formControlName]=\"item.key\"\n                            class=\"govuk-checkboxes__input\"\n                            [value]=\"false\"\n                            type=\"checkbox\"\n                          />\n                          <label class=\"govuk-label govuk-checkboxes__label\">\n                            {{ item.key | unsnake }} ({{ item.length }})\n                          </label>\n                        </div>\n                      </div>\n                    </div>\n                  </mv-gov-uk-fieldset>\n                </div>\n                <div class=\"dates__cta\">\n                  <button type=\"submit\" class=\"govuk-button\">\n                    {{ \"Filter comments\" | rpxTranslate }}\n                  </button>\n                </div>\n              </div>\n            </form>\n          </ng-container>\n          <ng-container *ngIf=\"comments[0]\">\n            <ngx-datatable\n              [rows]=\"comments\"\n              rowHeight=\"auto\"\n              headerHeight=\"auto\"\n              [columnMode]=\"'flex'\"\n              [sorts]=\"[{ prop: 'date', dir: 'desc' }]\"\n            >\n              <ngx-datatable-column\n                name=\"{{ 'User' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Page' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <a\n                    [routerLink]=\"[]\"\n                    class=\"comment-summary_pages\"\n                    (click)=\"navigateToPage(value)\"\n                    >{{ value }}</a\n                  >\n                </ng-template>\n              </ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Date' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Comment' | rpxTranslate }}\"\n                [flexGrow]=\"3\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Tags' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <span class=\"hmcts-badge\" *ngFor=\"let tag of value\">{{\n                    tag.label\n                  }}</span>\n                </ng-template>\n              </ngx-datatable-column>\n            </ngx-datatable>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!comments[0]\">\n          <h3 class=\"govuk-heading-s\">\n            {{\n              \"No comments available. Select text to add a highlight or comment.\"\n                | rpxTranslate\n            }}\n          </h3>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"button-container\">\n      <button (click)=\"onPrint()\" class=\"govuk-button govuk-button--secondary\">\n        {{ \"Print\" | rpxTranslate }}\n      </button>\n      <button id=\"modal-close-button\" (click)=\"onClose()\" class=\"govuk-button\">\n        {{ \"Close\" | rpxTranslate }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.PrintService }, { type: i3.ToolbarEventService }, { type: i4.FormBuilder }], propDecorators: { title: [{
                type: Input
            }], contentType: [{
                type: Input
            }], container: [{
                type: ViewChild,
                args: ['outerContainer', { static: true }]
            }], commentsTable: [{
                type: ViewChild,
                args: ['commentContainer', { static: false }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 