'use client';

import { useMemo, type ReactNode } from 'react';
import { SavedFilterActiveTag } from '@/components/listings';
import { useIsMobile } from '@/hooks/useIsMobile';
import { FeiraListHeaderToolbar } from './FeiraListHeaderToolbar';
import { FeiraListMobileActionBar } from './FeiraListMobileActionBar';

export type FeiraListResponsiveToolbarInput = {
    enabled?: boolean;
    filtroSalvoAtivo: { nome: string } | null;
    filtroSalvoDataTestId: string;
    filtrosAtivosCount: number;
    filtrosModalOpen: boolean;
    onOpenFiltros: () => void;
    filterButtonTestId: string;
    filterTooltipActive: string;
    filterTooltipEmpty: string;
    filterAriaLabel?: string;
    leadingExtra?: ReactNode;
    optionsButton?: ReactNode;
    exportButton: ReactNode;
};

/**
 * Header desktop completo; no mobile, tag de filtro salvo (se houver) + barra sticky.
 */
export function useFeiraListResponsiveToolbar(input: FeiraListResponsiveToolbarInput): {
    headerAction: ReactNode | null;
    mobileActionBar: ReactNode | null;
    isMobile: boolean;
} {
    const isMobile = useIsMobile();
    const enabled = input.enabled !== false;

    const headerAction = useMemo(() => {
        if (!enabled) {
            return null;
        }
        if (isMobile) {
            return input.filtroSalvoAtivo ? (
                <SavedFilterActiveTag
                    nome={input.filtroSalvoAtivo.nome}
                    dataTestId={input.filtroSalvoDataTestId}
                />
            ) : null;
        }
        return (
            <FeiraListHeaderToolbar
                filtroSalvoAtivo={input.filtroSalvoAtivo}
                filtroSalvoDataTestId={input.filtroSalvoDataTestId}
                filtrosAtivosCount={input.filtrosAtivosCount}
                filtrosModalOpen={input.filtrosModalOpen}
                onOpenFiltros={input.onOpenFiltros}
                filterButtonTestId={input.filterButtonTestId}
                filterTooltipActive={input.filterTooltipActive}
                filterTooltipEmpty={input.filterTooltipEmpty}
                filterAriaLabel={input.filterAriaLabel}
                leadingExtra={input.leadingExtra}
                optionsButton={input.optionsButton}
                exportButton={input.exportButton}
            />
        );
    }, [
        enabled,
        isMobile,
        input.filtroSalvoAtivo,
        input.filtroSalvoDataTestId,
        input.filtrosAtivosCount,
        input.filtrosModalOpen,
        input.onOpenFiltros,
        input.filterButtonTestId,
        input.filterTooltipActive,
        input.filterTooltipEmpty,
        input.filterAriaLabel,
        input.leadingExtra,
        input.optionsButton,
        input.exportButton,
    ]);

    const mobileActionBar =
        enabled && isMobile ? (
            <FeiraListMobileActionBar
                filtrosAtivosCount={input.filtrosAtivosCount}
                onOpenFiltros={input.onOpenFiltros}
                leadingExtra={input.leadingExtra}
                optionsButton={input.optionsButton}
                exportButton={input.exportButton}
            />
        ) : null;

    return { headerAction, mobileActionBar, isMobile };
}