import { AfterViewInit, Component, Input, Renderer2 } from '@angular/core';
import { Cabinet, Board } from '@creedinteractive/onguard-models';

@Component({
    selector: 'onguard-cabinet',
    templateUrl: './cabinet.component.html',
    styleUrls: ['./cabinet.component.scss'],
})
export class CabinetComponent {
    @Input() model: Cabinet;
    currentZoom = null;
    isLoading: boolean = true;

    constructor(private renderer: Renderer2) {}

    loadCabinetBoards() {
        this.isLoading = false;
    }

    toggleZoom(event: any, board: Board) {
        if (!board) {
            return;
        }

        if (event.target === this.currentZoom) {
            this.renderer.removeClass(event.target, 'zoom');
            this.currentZoom = null;
        } else {
            if (this.currentZoom) {
                this.renderer.removeClass(this.currentZoom, 'zoom');
            }
            this.renderer.addClass(event.target, 'zoom');
            this.currentZoom = event.target;
        }
    }

    getSrc(highres = false): string {
        const modelType = this.model.type.toUpperCase();
        return `/assets/images/cabinets/Carrier-${modelType}${highres ? '@2x' : ''}.png`;
    }
}