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

import {BehaviorSubject} from 'rxjs';

import {NavigationParams, Tab} from 'm2-core';
import {CdDemoComponent} from '../../../abstract/CdDemoComponent';


interface MyBtnTab extends Tab {
    data: number;
}


@Component({
    template: `
        <section #sectionRef id="buttonTabs" class="cd-content-section">
            <h4 i18n>Вкладки-кнопки</h4>

            <div class="mt-5">
                <sdi-tabs
                        styleClasses="card-tabs"
                        [tabs]="btnTabs1"
                        [activeTab]="activeTabSubj1$ | async"
                        (tabClick)="activeTabSubj1$.next($event)"
                >
                </sdi-tabs>
                <div class="cd-tab-body">
                    <container-placeholder [msg]="'tab ' + (activeTabSubj1$ | async).data"></container-placeholder>
                </div>
            </div>

            <div class="mt-5">
                <sdi-tabs
                        styleClasses="form-tabs"
                        [tabs]="btnTabs2"
                        [activeTab]="activeTabSubj2$ | async"
                        (tabClick)="activeTabSubj2$.next($event)"
                >
                </sdi-tabs>
                <div class="cd-tab-body">
                    <container-placeholder [msg]="'tab ' + (activeTabSubj2$ | async).data"></container-placeholder>
                </div>
            </div>

            <div class="mt-5">
                <sdi-tabs
                        styleClasses="form-tabs"
                        [tabs]="btnTabs3"
                        [activeTab]="activeTabSubj3$ | async"
                        [showAddTabBtn]="true"
                        [showDeleteTabBtn]="true"
                        [showEditTabBtn]="true"
                        (addTabClick)="addTab3()"
                        (deleteTabClick)="deleteTab3($event)"
                        (editTabClick)="editTab3($event)"
                        (tabClick)="activeTabSubj3$.next($event)"
                >
                </sdi-tabs>
                <div class="cd-tab-body">
                    <container-placeholder 
                            *ngIf="activeTabSubj3$ | async as activeTab; else noActiveTabRef"
                            [msg]="'tab ' + (activeTabSubj3$ | async).data"
                    >
                    </container-placeholder>
                    <ng-template #noActiveTabRef>
                        <container-placeholder msg="вкладка не выбрана"></container-placeholder>
                    </ng-template>
                </div>
            </div>
        </section>

        <section #sectionRef id="linkTabs" class="cd-content-section">
            <h4 i18n>Вкладки-ссылки</h4>

            <div class="mt-5">
                <sdi-tabs
                        styleClasses="form-tabs"
                        [tabRefs]="tabRefs"
                >
                </sdi-tabs>
                <div class="cd-tab-body">
                    <router-outlet></router-outlet>
                </div>
            </div>
        </section>
    `,
    styleUrls: ['./cd-tabs-demo.component.scss']
})
export class CdTabsDemoComponent extends CdDemoComponent {

    btnTabs1: MyBtnTab[] = createButtonTabs(20);
    activeTabSubj1$ = new BehaviorSubject<MyBtnTab>(this.btnTabs1[0]);


    btnTabs2: MyBtnTab[] = createButtonTabs(20);
    activeTabSubj2$ = new BehaviorSubject<MyBtnTab>(this.btnTabs2[0]);

    btnTabs3: MyBtnTab[] = createButtonTabs(3, { deletable: true });
    activeTabSubj3$ = new BehaviorSubject<MyBtnTab>(this.btnTabs3[0]);


    // region editTabs
    addTab3(): void {
        const nextData = this.btnTabs3.reduce((max, t) => max > t.data ? max : t.data, 0) + 1;
        const tab = { displayName: `Вкладка ${nextData}`, data: nextData, isDeletable: true };
        this.btnTabs3 = [...this.btnTabs3, tab];
    }

    deleteTab3({ tab }): void {
        const tabIndex = this.btnTabs3.indexOf(tab);
        this.btnTabs3 = this.btnTabs3.filter(t => t !== tab);
        if (tab === this.activeTabSubj3$.getValue()) {
            this.activeTabSubj3$.next(this.btnTabs3[tabIndex - 1] || this.btnTabs3[0]);
        }
    }

    editTab3({ tab }: { tab: MyBtnTab, event: MouseEvent }): void {
        tab.displayName = `Вкладка ${Date.now()}`;
    }
    // endregion editTabs


    tabRefs = createLinkTabs(3);

}


// region tabsCreation
function createButtonTabs(count: number, opts?: { deletable?: boolean }): MyBtnTab[] {
    return Array
        .from({ length: count })
        .map((_, i) => ({
            displayName: `Вкладка ${i + 1}`,
            data: i + 1,
            isDeletable: opts?.deletable
        }));
}

function createLinkTabs(count: number): NavigationParams[] {
    return Array
        .from({ length: count })
        .map((_, i) => new NavigationParams(`./tab${i + 1}`,
            null, null, '_self', false, `Вкладка ${i + 1}`));
}
// endregion tabsCreation
