import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { IconButtonComponent, IconButtonTypes } from '../buttons';
import { randomString } from '../utils';
import { NgIf, NgStyle } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';

@Component({
    selector: 'iqser-empty-state [text]',
    templateUrl: './empty-state.component.html',
    styleUrls: ['./empty-state.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [NgStyle, MatIconModule, NgIf, IconButtonComponent],
})
export class EmptyStateComponent implements OnInit {
    readonly iconButtonTypes = IconButtonTypes;

    @Input() text!: string;
    @Input() icon?: string;
    @Input() showButton = true;
    @Input() buttonIcon = 'iqser:plus';
    @Input() buttonLabel?: string;
    @Input() buttonId = `${randomString()}-icon-button`;
    @Input() horizontalPadding = 100;
    @Input() verticalPadding = 120;
    @Input() helpModeKey?: string;
    @Output() readonly action = new EventEmitter();

    ngOnInit(): void {
        this.showButton = this.showButton && this.action.observed;
    }
}