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

@Component({
    selector: 'app-floating-content',
    template: `
    <div class="fixed-action-btn">
        <div class="btn-floating btn-large btn-{{typeClass}}">
            <span class="ux-icon ux-icon-info" (click)="toggleCode()"></span>
        </div>
    </div>
    <ux-modal id="floating-code-modal" titleLabel="{{label}}"
                [isFooterVisible]="false" [isSizeMediumHeight]="!isFullScreen" [isSizeFullScreen]="isFullScreen" [isSizeLarge]="true">
        <uxModalBody>
            <ng-content></ng-content>
        </uxModalBody>
    </ux-modal>
  `
})
export class AppFloatingContentComponent {
    @Input() isFullScreen: boolean = false;
    @Input() label: string = 'Information';
    @Input() typeClass: string = 'info';

    constructor(private uxService: UxService, public asService: UxAppShellService) { }

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