'use client';

import type { ReactNode } from 'react';
import { Modal } from 'antd';
import type { ModalProps } from 'antd';
import {
    FiltrosModalFooterPadrao,
    FiltrosModalTabsTitulo,
    FILTROS_MODAL_TAB_KEY,
    type FiltrosModalTabsTituloActiveKey,
} from '@/components/listings';

type FiltrosModalLayout = Pick<ModalProps, 'width' | 'centered' | 'styles'>;

export type FeiraListFiltrosModalShellProps = {
    testId: string;
    open: boolean;
    onCancel: () => void;
    filtrosModalTab: FiltrosModalTabsTituloActiveKey;
    onTabChange: (key: FiltrosModalTabsTituloActiveKey) => void;
    modalLayout: FiltrosModalLayout;
    onLimparTodos: () => void;
    onFiltrar: () => void;
    disabledFiltrar?: boolean;
    destroyOnHidden?: boolean;
    children: ReactNode;
};

/** Modal de filtros (tabs + footer padrão) — partilhado pelas listagens da feira. */
export function FeiraListFiltrosModalShell({
    testId,
    open,
    onCancel,
    filtrosModalTab,
    onTabChange,
    modalLayout,
    onLimparTodos,
    onFiltrar,
    disabledFiltrar = false,
    destroyOnHidden = false,
    children,
}: FeiraListFiltrosModalShellProps) {
    return (
        <Modal
            title={
                <FiltrosModalTabsTitulo
                    activeKey={filtrosModalTab}
                    onChange={onTabChange}
                    destroyOnHidden={false}
                />
            }
            open={open}
            onCancel={onCancel}
            footer={
                <FiltrosModalFooterPadrao
                    onLimparTodos={onLimparTodos}
                    onFechar={onCancel}
                    showFiltrarPrimary={filtrosModalTab === FILTROS_MODAL_TAB_KEY.filtrar}
                    onFiltrar={onFiltrar}
                    disabledFiltrar={disabledFiltrar}
                    dataTestIdLimparTodos={`${testId}-limpar-todos`}
                />
            }
            destroyOnHidden={destroyOnHidden}
            width={modalLayout.width ?? 560}
            centered={modalLayout.centered}
            styles={modalLayout.styles ?? {}}
            keyboard
            focusTriggerAfterClose
            data-testid={testId}
        >
            {children}
        </Modal>
    );
}