import {
    ChangeDetectionStrategy,
    Component,
    EventEmitter,
    Input,
    Output,
} from '@angular/core';
import { ITextColor } from '../../text/text.component';

@Component({
    selector: 'tab-button',
    templateUrl: './tab-button.component.html',
    styleUrls: ['./tab-button.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TabButtonComponent {
    @Input() label!: string;
    @Input() value!: unknown;
    @Input() active = false;
    @Input() disabled = false;
    @Output() tabClick = new EventEmitter<unknown>();

    onClick() {
        if (this.disabled) {
            return;
        }

        this.tabClick.emit(this.value);
    }

    get buttonClasses() {
        return {
            'tab-button': true,
            'tab-button--active': this.active,
            'tab-button--disabled': this.disabled,
        };
    }

    get textColor(): ITextColor {
        return this.active ? 'default' : 'blue';
    }
}
