import React from 'react';
import { TYPE_PRODUCT, TYPE_PROJECT } from 'src/constants/catalog';
import { CLASSNAME } from '../constants';

export const TYPE_BTN_ID: Record<string, string> = {
    [TYPE_PRODUCT]: 'globalSearchProductsButton',
    [TYPE_PROJECT]: 'globalSearchProjectsButton',
};

interface OptionGroupFooterProps {
    groupCount?: number;
    totalCount?: number;
    footerType?: string;
    type?: string;
    formatMessage?: (key: string, args?: Record<string, unknown>) => string;
    onClick?: () => void;
    idPrefix?: string;
}

const OptionGroupFooter: React.FC<OptionGroupFooterProps> = ({
    groupCount = 0,
    totalCount = 0,
    footerType,
    formatMessage = msg => msg,
    type = '',
    idPrefix,
    onClick,
}) => {
    if (footerType === 'link') {
        const message = formatMessage(`${type}Results`, { count: totalCount });
        return (
            <div
                className={`${CLASSNAME}-footer`}
                onClick={onClick}
                id={
                    idPrefix && TYPE_BTN_ID[type]
                        ? `${idPrefix}-${TYPE_BTN_ID[type]}`
                        : undefined
                }
            >
                {message}
                <span className="ml-1">&rarr;</span>
            </div>
        );
    }

    if (footerType === 'limited' && groupCount < totalCount)
        return (
            <div className={`${CLASSNAME}-footer-static`}>
                {formatMessage('tooManyResults')}
            </div>
        );

    return <div className={`${CLASSNAME}-footer`} />;
};

export default OptionGroupFooter;