import { Component, Input, Directive, ContentChild, forwardRef, QueryList } from '@angular/core';
import { UxService } from '@eui/core';

@Component({
    selector: 'app-floating-code',
    template: `
        <div class="fixed-action-btn">
            <div class="btn-floating btn-large btn-accent">
                <span class="ux-icon ux-icon-code" (click)="toggleCode()"></span>
            </div>
        </div>

        <ux-modal id="floating-code-modal" titleLabel="{{label}}"
                  [isFooterVisible]="false" [isSizeMediumHeight]="!isFullScreen" [isSizeFullScreen]="isFullScreen" [isSizeLarge]="true">
        <uxModalBody>
            <ng-template [ngIf]="floatingCodeHTML && floatingCodeTS">
            <ux-tabs>
                <ux-tab label="HTML">
<pre><code class="language-markup" pCode><ng-content select="floatingCodeHTML"></ng-content></code>
</pre>
                </ux-tab>

                <ux-tab label="TS">
<pre><code class="language-javascript" pCode><ng-content select="floatingCodeTS"></ng-content></code>
</pre>
                </ux-tab>
            </ux-tabs>
            </ng-template>

            <ng-template [ngIf]="!floatingCodeHTML && !floatingCodeTS">
<pre><code class="language-markup" pCode><ng-content></ng-content></code>
</pre>
            </ng-template>
        </uxModalBody>
        </ux-modal>

  `
})
export class AppFloatingCodeComponent {
    @Input() isFullScreen: boolean = false;
    @Input() label: string = 'Code sample';

    @ContentChild(forwardRef(() => AppFloatingCodeHtmlTagDirective)) floatingCodeHTML: QueryList<AppFloatingCodeHtmlTagDirective>;
    @ContentChild(forwardRef(() => AppFloatingCodeTsTagDirective)) floatingCodeTS: QueryList<AppFloatingCodeTsTagDirective>;

    constructor(private uxService: UxService) { }

    toggleCode() {
        this.uxService.openModal('floating-code-modal');
    }
}

/* tslint:disable */
@Directive({ selector: 'floatingCodeHTML' })
export class AppFloatingCodeHtmlTagDirective { }

@Directive({ selector: 'floatingCodeTS' })
export class AppFloatingCodeTsTagDirective { }
/* tslint:enable */
