import { Component, Input, AfterContentInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
    selector: 'app-sample-page-header',
    template: `
    <ux-layout-page-header pageTitle="{{pageTitle}}">
        <uxLayoutPageHeaderActionsContent>
            <button *ngIf="pipeName" class="btn btn-danger ml-2" (click)="onShowTechDocPipe()">
                Pipe API
            </button>
            <button *ngIf="directiveName" class="btn btn-danger ml-2" (click)="onShowTechDocDirective()">
                Directive API
            </button>
            <button *ngIf="componentName" class="btn btn-danger ml-2" (click)="onShowTechDocComponent()">
                Component API
            </button>
            <button *ngFor="let dep of depsArray" class="btn btn-success ml-2" (click)="onShowTechDocDeps(dep)">
                {{dep}} API
            </button>
            <app-view-source-code *ngIf="sourceUrl" [sourceUrl]="sourceUrl"></app-view-source-code>
            <button *ngIf="eclDocumentationId" class="btn btn-accent ml-2" (click)="onOpenEclDocumentation()">
                <span class="ux-icon ux-icon-fw ux-icon-code"></span>Ecl documentation
            </button>
        </uxLayoutPageHeaderActionsContent>
    </ux-layout-page-header>
    `
})
export class AppSamplePageHeaderComponent implements AfterContentInit {
    @Input() pageTitle: string;
    @Input() componentName: string;
    @Input() directiveName: string;
    @Input() pipeName: string;
    @Input() deps: string;
    @Input() sourceUrl: string;
    @Input() eclDocumentationId: string;

    depsArray: string[];

    constructor(
        private route: ActivatedRoute,
    ) {}

    ngAfterContentInit() {
        if (this.deps) {
            this.depsArray = this.deps.split(',');
        }
    }

    onShowTechDocComponent() {
        this._openTechDoc('components', this.componentName);
    }

    onShowTechDocDirective() {
        this._openTechDoc('directives', this.directiveName);
    }

    onShowTechDocPipe() {
        this._openTechDoc('pipes', this.pipeName);
    }

    onShowTechDocDeps(dep: string) {
        if (dep === 'UxService') {
            this._openTechDoc('injectables', dep);
        }

        if (dep === 'UxLink' ||
            dep === 'UxAutocompleteTagItem' ||
            dep === 'UxActionBoxItem' ||
            dep === 'UxTabItem' ||
            dep === 'UxTimebarItem' ||
            dep === 'UxWizardStep'
        ) {
            this._openTechDoc('classes', dep);
        }
    }

    onOpenSourceUrl() {
        const url = window.location;
        const pathName = url.pathname;
        const pathNameArray = pathName.split('/');

        const csdrRepoRootPath = 'https://webgate.ec.europa.eu/CITnet/stash/projects/CSDR/repos';
        const csdrRepoPath = pathNameArray[1].replace('-7.x', '');
        const csdrAppRootPath = `${csdrRepoRootPath}/${csdrRepoPath}/browse/app-eui-showcase/src/app/features/${this.sourceUrl}`;
        console.log(csdrAppRootPath);
        window.open(csdrAppRootPath, '_blank');
    }

    onOpenEclDocumentation() {
        const eclDocPath = 'https://v2--europa-component-library.netlify.com/';
        window.open(eclDocPath + this.eclDocumentationId, '_blank');
    }

    private _openTechDoc(category: string, name) {
        // const url = new URL('https://euidev.ecdevops.eu/eui-showcase-ux-7.x/app-style-guide/components/ux-a-date-tag');
        const url = window.location;
        const protocol = url.protocol;
        const host = url.host;
        const pathName = url.pathname;
        const pathNameArray = pathName.split('/');
        const docPath = `${protocol}//${host}/${pathNameArray[1].replace('showcase', 'docs')}/${category}/${name}.html`;

        console.log(docPath);

        window.open(docPath, '_blank');
    }
}
