import { Component, HostBinding, Input } from '@angular/core';
import { AbstractControl, FormControl } from '@angular/forms';
import { ModalSize, OverlayService } from '@aztrix/components/overlay';
import { fuzzySort } from '@aztrix/helpers';
import { IconService } from '@aztrix/icons';
import { combineLatest, debounceTime, first, map, shareReplay, startWith } from 'rxjs';
import { IconDetailSelectComponent } from './icon-detail-select/icon-detail-select.component';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/icons";
import * as i2 from "@aztrix/components/overlay";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "@angular/material/legacy-form-field";
import * as i6 from "@angular/material/legacy-input";
import * as i7 from "@angular/cdk/scrolling";
import * as i8 from "@aztrix/components/button";
import * as i9 from "@aztrix/helpers";
export class IconSelectComponent {
    constructor(_iconService, _overlay) {
        this._iconService = _iconService;
        this._overlay = _overlay;
        this.columnsPerRow = 8;
        this.searchControl = new FormControl('');
        this.filteredControl = new FormControl(true);
        this._materialIcons$ = this._iconService.meta$.pipe(map((meta) => meta.filter((i) => i.namespace === 'material')));
        this._searchIcons$ = combineLatest([
            this.searchControl.valueChanges.pipe(startWith(''), debounceTime(300)),
            this.filteredControl.valueChanges.pipe(startWith(true)),
            this._materialIcons$,
        ]).pipe(map(([search, filtered, meta]) => {
            if (filtered) {
                meta = meta.filter((i) => i.groups?.includes('base'));
            }
            return fuzzySort(meta, search, ['name', 'aliases'], 0.3, Infinity);
        }), shareReplay(1));
        this.count$ = this._searchIcons$.pipe(map((icons) => icons?.length));
        this.rows$ = this._searchIcons$.pipe(map((icons) => {
            return icons.reduce((prev, curr) => {
                const lastRow = prev[prev.length - 1];
                if (!lastRow || lastRow.length >= this.columnsPerRow) {
                    prev.push([]);
                }
                const currentLastRow = prev[prev.length - 1];
                currentLastRow.push(curr);
                return prev;
            }, []);
        }));
    }
    select(name) {
        if (this.filteredControl.value) {
            this._materialIcons$.subscribe((meta) => {
                meta = meta.filter((i) => !i.groups?.includes('base'));
                const iconVariants = meta.filter((i) => i.name.startsWith(`${name}-`)).map((i) => i.name);
                if (iconVariants.length > 0) {
                    const modalRef = this._overlay.createModal(IconDetailSelectComponent, {
                        modalSize: ModalSize.EXTRA_SMALL,
                        init: (modal) => {
                            modal.mainIcon = name;
                            modal.icons = iconVariants;
                            modal.color = this.color;
                            modal.selected.pipe(first()).subscribe((icon) => {
                                this._overlay.closeModal(modalRef);
                                this.form.setValue(icon);
                            });
                        },
                    });
                }
                else {
                    this.form.setValue(name);
                }
            });
        }
        else {
            this.form.setValue(name);
        }
    }
}
IconSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: IconSelectComponent, deps: [{ token: i1.IconService }, { token: i2.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
IconSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: IconSelectComponent, selector: "ax-icon-select", inputs: { form: "form", columnsPerRow: "columnsPerRow", color: "color" }, host: { properties: { "class": "this.color" } }, ngImport: i0, template: "<ax-icon matPrefix *ngIf=\"form?.value\" class=\"selected icon\" [name]=\"form.value\"></ax-icon>\n\n<div class=\"search\">\n  <mat-form-field class=\"c-input\" appearance=\"outline\">\n    <ax-icon matPrefix class=\"icon\" name=\"magnify\"></ax-icon>\n    <input matInput autocomplete=\"off\" type=\"text\" class=\"input\" [formControl]=\"searchControl\" />\n    <button\n      matSuffix\n      axButton\n      icon-button\n      class=\"clear-button\"\n      aria-label=\"Clear\"\n      *ngIf=\"searchControl?.value?.length\"\n      (click)=\"searchControl.setValue('')\"\n    >\n      <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n    </button>\n    <mat-hint>{{ count$ | async }} {{ 'label.results' | translate }}</mat-hint>\n  </mat-form-field>\n\n  <button\n    class=\"filtered\"\n    axButton\n    icon-button\n    [filled]=\"filteredControl?.value\"\n    (click)=\"filteredControl.setValue(!filteredControl?.value)\"\n  >\n    <ax-icon class=\"icon\" [name]=\"filteredControl?.value ? 'filter-off' : 'filter'\"></ax-icon>\n  </button>\n</div>\n\n<cdk-virtual-scroll-viewport class=\"viewport\" [itemSize]=\"50\">\n  <div class=\"row\" *cdkVirtualFor=\"let row of rows$ | async\">\n    <button\n      axButton\n      icon-button\n      class=\"item\"\n      [filled]=\"icon.name === form?.value\"\n      [color]=\"color\"\n      *ngFor=\"let icon of row\"\n      (click)=\"select(icon.name)\"\n    >\n      <ax-icon class=\"icon\" [name]=\"icon.name\"></ax-icon>\n    </button>\n  </div>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block}:host.primary{color:var(--primary-color-500)}:host.secondary{color:var(--secondary-color-500)}.selected.icon{display:block;width:60px;height:60px;margin:auto}.search{display:flex;gap:1rem;padding:1rem 1rem 0}.viewport{min-height:400px}.filtered{margin-bottom:auto;margin-top:16px;flex-shrink:0}button.item{width:50px;height:50px}button.item .icon{width:40px;height:40px;margin:5px}.row{display:flex;justify-content:center;height:50px}\n"], dependencies: [{ 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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLegacyHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLegacyPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i7.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i7.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i1.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: IconSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-icon-select', template: "<ax-icon matPrefix *ngIf=\"form?.value\" class=\"selected icon\" [name]=\"form.value\"></ax-icon>\n\n<div class=\"search\">\n  <mat-form-field class=\"c-input\" appearance=\"outline\">\n    <ax-icon matPrefix class=\"icon\" name=\"magnify\"></ax-icon>\n    <input matInput autocomplete=\"off\" type=\"text\" class=\"input\" [formControl]=\"searchControl\" />\n    <button\n      matSuffix\n      axButton\n      icon-button\n      class=\"clear-button\"\n      aria-label=\"Clear\"\n      *ngIf=\"searchControl?.value?.length\"\n      (click)=\"searchControl.setValue('')\"\n    >\n      <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n    </button>\n    <mat-hint>{{ count$ | async }} {{ 'label.results' | translate }}</mat-hint>\n  </mat-form-field>\n\n  <button\n    class=\"filtered\"\n    axButton\n    icon-button\n    [filled]=\"filteredControl?.value\"\n    (click)=\"filteredControl.setValue(!filteredControl?.value)\"\n  >\n    <ax-icon class=\"icon\" [name]=\"filteredControl?.value ? 'filter-off' : 'filter'\"></ax-icon>\n  </button>\n</div>\n\n<cdk-virtual-scroll-viewport class=\"viewport\" [itemSize]=\"50\">\n  <div class=\"row\" *cdkVirtualFor=\"let row of rows$ | async\">\n    <button\n      axButton\n      icon-button\n      class=\"item\"\n      [filled]=\"icon.name === form?.value\"\n      [color]=\"color\"\n      *ngFor=\"let icon of row\"\n      (click)=\"select(icon.name)\"\n    >\n      <ax-icon class=\"icon\" [name]=\"icon.name\"></ax-icon>\n    </button>\n  </div>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block}:host.primary{color:var(--primary-color-500)}:host.secondary{color:var(--secondary-color-500)}.selected.icon{display:block;width:60px;height:60px;margin:auto}.search{display:flex;gap:1rem;padding:1rem 1rem 0}.viewport{min-height:400px}.filtered{margin-bottom:auto;margin-top:16px;flex-shrink:0}button.item{width:50px;height:50px}button.item .icon{width:40px;height:40px;margin:5px}.row{display:flex;justify-content:center;height:50px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.IconService }, { type: i2.OverlayService }]; }, propDecorators: { form: [{
                type: Input
            }], columnsPerRow: [{
                type: Input
            }], color: [{
                type: HostBinding,
                args: ['class']
            }, {
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 