import {Component} from '@angular/core';

import {SelectionType} from '@swimlane/ngx-datatable';

import {from, merge, Observable, Subject} from 'rxjs';
import {map, shareReplay, switchMap} from 'rxjs/operators';

import {
    Application, ApplicationAttributeRow,
    ApplicationAttributesInfo,
    ApplicationFilter, ApplicationReadService,
    ApplicationSelectorConfig,
    ApplicationsService,
    CONSTANTS,
    LayerService,
    LayerConfig
} from 'm2-core';
import {CdDemoComponent} from '../../../abstract/CdDemoComponent';
import {CdHelperService} from '../../../../../service/cd-helper.service';


@Component({
    template: `
        <section #sectionRef id="demoComponent" class="cd-content-section">
            <h4 i18n>Заявка</h4>

            <div class="cd-demo-widget sdi-card-wrapper p-4">
                <a *ngIf="application$ | async as application"
                   routerLink="{{CONSTANTS.APPLICATION_ROUTER_LINK}}"
                   [queryParams]="{ applicationId: application.id }"
                   target="_blank"
                   class="sdi-link"
                >
                    № {{application.uid}} - {{application.displayName}}
                </a>

                <button class="sdi-btn sdi-btn_icon name-postfix"
                        i18n-title="@@selectApplicationTitle" title="Выбрать заявку"
                        (click)="onSelectApplicationClick()"
                >
                    <i class="fa fa-folder-open"></i>
                </button>
            </div>
        </section>

        <section #sectionRef id="attributesSingle" class="cd-content-section">
            <h4 i18n>Атрибуты заявки</h4>

            <div class="cd-demo-widget sdi-card-wrapper">
                <application-attributes-single
                        *ngIf="attributeRows$ | async as attributeRows"
                        [editModeON]="editModeON"
                        [application]="application$ | async"
                        [attributeRows]="attributeRows"
                        [showEmptyAttributes]="showEmptyAttributes"
                        [classifiableTarget]="classifiableTarget"
                >
                </application-attributes-single>
            </div>
        </section>

<!--        <section class="cd-content-section">-->
<!--            <h4 i18n>Атрибут заявки</h4>-->

<!--            <div class="mt-3">-->
<!--                <application-attribute-value-->
<!--                        *ngIf="attributesInfo?.attributes.length > 0"-->
<!--                        [editModeON]="editModeON"-->
<!--                        [attribute]="attributesInfo.attributes[0]"-->
<!--                >-->
<!--                </application-attribute-value>-->
<!--            </div>-->
<!--        </section>-->
    `
})
export class CdApplicationAttributesDemoComponent extends CdDemoComponent {

    constructor(
        private cdHelperService: CdHelperService,
        private applicationReadService: ApplicationReadService,
        private applicationsService: ApplicationsService,
        private layerService: LayerService
    ) {
        super();
    }

    private selectedAppSubj$ = new Subject<Application>();

    application$: Observable<Application> = merge(
        from(this.cdHelperService.getAnyApplication()),
        this.selectedAppSubj$
    ).pipe(
        shareReplay(1)
    );

    attributesInfo$: Observable<ApplicationAttributesInfo> = this.application$
        .pipe(
            switchMap(app => from(this.applicationsService.loadAttributesInfo(app))),
            shareReplay(1)
        );

    attributeRows$: Observable<ApplicationAttributeRow[]> = this.attributesInfo$
        .pipe(map(info => ([...info.applicationAttributeRows, ...info.itemAttributeRows])));

    editModeON = false;
    showEmptyAttributes = true;
    classifiableTarget = '_blank';

    CONSTANTS = CONSTANTS;


    onSelectApplicationClick(): void {
        const config = new ApplicationSelectorConfig(ApplicationFilter.Mine, null, SelectionType.single);
        this.layerService.activateLayer(new LayerConfig(config, async appIds => {
            const app = await this.applicationReadService.getApplicationById(appIds[0]);
            this.selectedAppSubj$.next(app);
        }));
    }

}
