import React from 'react';
import type { EneonTabsProps } from './types';

function manejarTeclaPestana(
    evento: React.KeyboardEvent<HTMLAnchorElement>,
    tabId: string,
    onTabChange: EneonTabsProps['onTabChange'],
    disabled?: boolean,
): void {
    if (disabled) {
        return;
    }

    if (evento.key === 'Enter' || evento.key === ' ') {
        evento.preventDefault();
        onTabChange(tabId);
    }
}

function claseVariante(variant: EneonTabsProps['tabs'][number]['variant']): string {
    return `eneon-tabs__link--${variant ?? 'default'}`;
}

export default function EneonTabs({
    tabs,
    activeTabId,
    onTabChange,
    ariaLabel,
    className = '',
    cardHeader = false,
}: EneonTabsProps): React.ReactElement {
    const clasesLista = [
        'nav',
        'nav-tabs',
        'eneon-tabs',
        cardHeader ? 'card-header-tabs' : '',
        className,
    ]
        .filter(Boolean)
        .join(' ');

    return (
        <ul className={clasesLista} role="tablist" aria-label={ariaLabel}>
            {tabs.map((tab) => {
                const activa = activeTabId === tab.id;
                const variante = tab.variant ?? 'default';
                const panelId = tab.panelId ?? `panel-${tab.id}`;

                return (
                    <li
                        key={tab.id}
                        className="nav-item eneon-tabs__item"
                        role="presentation"
                    >
                        <a
                            className={`nav-link eneon-tabs__link d-flex align-items-center ${claseVariante(variante)} ${activa ? 'active' : ''}`}
                            onClick={(evento) => {
                                evento.preventDefault();
                                if (!tab.disabled) {
                                    onTabChange(tab.id);
                                }
                            }}
                            onKeyDown={(evento) => manejarTeclaPestana(evento, tab.id, onTabChange, tab.disabled)}
                            role="tab"
                            id={`tab-${tab.id}`}
                            aria-controls={panelId}
                            aria-selected={activa}
                            aria-disabled={tab.disabled || undefined}
                            tabIndex={activa ? 0 : -1}
                            href={`#${panelId}`}
                        >
                            {tab.icon ? (
                                <span className="eneon-tabs__icon" aria-hidden="true">
                                    {tab.icon}
                                </span>
                            ) : null}
                            <span className="eneon-tabs__label">
                                {tab.label}
                                {tab.count !== undefined ? (
                                    <span
                                        className={`eneon-tabs__badge eneon-tabs__badge--${variante}`}
                                        aria-label={`${tab.count} elementos`}
                                    >
                                        {tab.count}
                                    </span>
                                ) : null}
                            </span>
                        </a>
                    </li>
                );
            })}
        </ul>
    );
}