import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
import { RouterLink } from '@angular/router';
import { StopPropagationDirective } from '../../directives';
import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils';
import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type';

@Component({
    selector: 'iqser-circle-button',
    templateUrl: './circle-button.component.html',
    styleUrls: ['./circle-button.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [MatTooltipModule, MatIconModule, NgIf, MatButtonModule, StopPropagationDirective],
})
export class CircleButtonComponent implements OnInit {
    readonly #elementRef = inject(ElementRef<HTMLElement>);
    @ViewChild(MatTooltip) private readonly _matTooltip!: MatTooltip;
    protected readonly _circleButtonTypes = CircleButtonTypes;
    protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
    @Input() buttonId = `${randomString()}-circle-button`;
    @Input({ required: true }) icon!: string;
    @Input() tooltip?: string;
    @Input() tooltipClass?: string;
    @Input() showDot = false;
    @Input() tooltipPosition: IqserTooltipPosition = IqserTooltipPositions.above;
    @Input() disabled = false;
    @Input() type: CircleButtonType = CircleButtonTypes.default;
    @Input() greySelected = false;
    @Input() removeTooltip = false;
    @Input() isSubmit = false;
    @Input() dropdownButton = false;
    @Input() size = 34;
    @Input() iconSize = 14;
    @Output() readonly action = new EventEmitter<MouseEvent>();

    ngOnInit() {
        this.#elementRef.nativeElement.style.setProperty('--circle-button-size', `${this.size}px`);
        this.#elementRef.nativeElement.style.setProperty('--circle-button-icon-size', `${this.iconSize}px`);
    }

    performAction($event: MouseEvent) {
        if (this.removeTooltip) {
            this._matTooltip.hide();
            // Timeout to allow tooltip to disappear first,
            // useful when removing an item from the list without a confirmation dialog
            setTimeout(() => this.action.emit($event));
        } else {
            this.action.emit($event);
        }
    }
}