import { HiddenCount } from '@theorchard/suite-components';
import React, { useState } from 'react';

export interface HiddenListCountPropTypes {
    items: string[];
    maxVisibleItems: number;
    testId: string | undefined;
}

export const HiddenListCount: React.FC<HiddenListCountPropTypes> = ({
    items,
    maxVisibleItems,
    testId,
}) => {
    const formattedItems = items.map((item, index) => {
        if (index == items.length - 1) return item;
        return item + ', ';
    });

    const [expanded, setExpanded] = useState(false);

    const itemsCount = formattedItems.length;
    const visibleItems = expanded
        ? formattedItems
        : formattedItems.slice(0, maxVisibleItems);

    const hiddenCount = itemsCount - visibleItems.length;
    if (itemsCount === 1)
        return (
            <div
                className="ContractTermsConditions-gridTable-cell"
                data-testid={testId ?? 'HiddenCountTestId'}
            >
                {visibleItems}
            </div>
        );
    if (itemsCount < maxVisibleItems)
        return (
            <div
                className="ContractTermsConditions-gridTable-cell"
                data-testid={testId ?? 'HiddenCountTestId'}
            >
                {visibleItems}
            </div>
        );
    return (
        <div
            className="ContractTermsConditions-gridTable-cell"
            data-testid={testId ?? 'HiddenCountTestId'}
        >
            {visibleItems}
            <HiddenCount
                testId="ContractTermsConditionsGridTableHiddenCount"
                doubleChevron={true}
                expanded={expanded}
                hiddenCount={hiddenCount}
                showExpander={itemsCount > maxVisibleItems}
                onClick={() => setExpanded(!expanded)}
            />
        </div>
    );
};