/**
 * Angular wrapper for Bryntum Fullscreen button
 */
import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { Button, Fullscreen } from '@bryntum/calendar';

@Component({
    selector : 'bryntum-fullscreen-button',
    template : ''
})
export class BryntumFullscreenButtonComponent implements OnInit, OnDestroy {
    // class variables
    private elementRef: ElementRef;
    private button!: Button;

    constructor(element: ElementRef) {
        this.elementRef = element;
    }

    /**
     * Initializes component
     */
    ngOnInit(): void {
        if (!Fullscreen.enabled) {
            return;
        }
        this.button = new Button({
            appendTo  : this.elementRef.nativeElement,
            icon      : 'b-icon b-icon-fullscreen',
            tooltip   : 'Fullscreen',
            rendition : 'text',
            onClick() {
                if (Fullscreen.enabled) {
                    if (!Fullscreen.isFullscreen) {
                        Fullscreen.request(document.body);
                    }
                    else {
                        Fullscreen.exit();
                    }
                }
            }
        });
    }

    /**
     * Destroys component
     */
    ngOnDestroy() : void {
        if (this.button) {
            this.button.destroy();
        }
    }
}
