import { NgClass } from '@angular/common';
import { booleanAttribute, ChangeDetectionStrategy, Component, computed, EventEmitter, inject, input, Output } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { RouterLink } from '@angular/router';
import { StopPropagationDirective } from '../../directives';
import { randomString } from '../../utils';
import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';

@Component({
    selector: 'iqser-icon-button',
    templateUrl: './icon-button.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgClass, MatButtonModule, MatIconModule, StopPropagationDirective],
})
export class IconButtonComponent {
    protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
    readonly label = input.required<string>();
    readonly buttonId = input(`${randomString()}-icon-button`);
    readonly icon = input<string>();
    readonly showDot = input(false, { transform: booleanAttribute });
    readonly active = input(false, { transform: booleanAttribute });
    readonly disabled = input(false, { transform: booleanAttribute });
    readonly submit = input(false, { transform: booleanAttribute });
    readonly type = input<IconButtonType>(IconButtonTypes.default);
    protected readonly _classes = computed(() => {
        return {
            overlay: this.showDot(),
            [this.type()]: true,
            'has-icon': !!this.icon(),
            active: this.active(),
        };
    });
    @Output() readonly action = new EventEmitter<MouseEvent>();

    emitAction($event: MouseEvent) {
        const activeElement = document.activeElement as HTMLElement;
        if (activeElement.tagName?.toLowerCase() === 'button') {
            this.action.emit($event);
        }
    }
}