'use client';

import React from 'react';
import { Tabs } from 'antd';
import styles from './FiltrosModalTabsModalHeader.module.scss';

/** Keys estáveis das abas (contrato §1.1 do plano de listagens / testes). */
export const FILTROS_MODAL_TAB_KEY = {
    filtrar: 'filtrar',
    meusFiltros: 'meus-filtros',
} as const;

export type FiltrosModalTabsTituloActiveKey =
    (typeof FILTROS_MODAL_TAB_KEY)[keyof typeof FILTROS_MODAL_TAB_KEY];

const hiddenPanel = <span style={{ display: 'none' }} aria-hidden />;

export type FiltrosModalTabsTituloProps = {
    activeKey: FiltrosModalTabsTituloActiveKey;
    onChange: (key: FiltrosModalTabsTituloActiveKey) => void;
    tabFiltrarLabel?: string;
    tabMeusFiltrosLabel?: string;
    /** Classes extra além de `.tabsInModalHeader` (ex.: variante por módulo). */
    className?: string;
    destroyOnHidden?: boolean;
};

/**
 * Abas "Filtrar" / "Meus filtros" no `title` de um `Modal` de filtros (painel oculto — só navegação).
 *
 * @see `docs/frontend/listagens/plano-rollout-listagem-movimentos.md` §1.2
 */
export function FiltrosModalTabsTitulo({
    activeKey,
    onChange,
    tabFiltrarLabel = 'Filtrar',
    tabMeusFiltrosLabel = 'Meus filtros',
    className,
    destroyOnHidden = false,
}: FiltrosModalTabsTituloProps) {
    const rootClass = [styles.tabsInModalHeader, className].filter(Boolean).join(' ');

    return (
        <Tabs
            className={rootClass}
            activeKey={activeKey}
            onChange={(key) => onChange(key as FiltrosModalTabsTituloActiveKey)}
            destroyOnHidden={destroyOnHidden}
            items={[
                {
                    key: FILTROS_MODAL_TAB_KEY.filtrar,
                    label: tabFiltrarLabel,
                    children: hiddenPanel,
                },
                {
                    key: FILTROS_MODAL_TAB_KEY.meusFiltros,
                    label: tabMeusFiltrosLabel,
                    children: hiddenPanel,
                },
            ]}
        />
    );
}