import _ from 'lodash';

import DisplayValue from '@/components/DisplayValue';
import { Badge } from '@/components/ui/badge';
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from '@/components/ui/tooltip';

import { TableItemProps } from '../TableItem';

const MAX_ITEMS = 1;

const IDsItem = (props: TableItemProps) => {

    const value = props.value;


    if (!value || _.size(value) == 0) {
        return <div style={{
            opacity: 0.2,
        }}>{props.structure?.title}</div>
    }

    return <div >
        {_.map(value, (item, index) => {


            if (index > MAX_ITEMS - 1) return null;

            return <Badge variant="secondary" ><DisplayValue
                className='text-xs font-medium'
                short={true} value={item} collection={props.structure?.collection ?? ""} /></Badge>
        })}
        {_.size(value) > MAX_ITEMS && <Tooltip>
            <TooltipTrigger> <Badge variant="default">
                +{_.size(value) - MAX_ITEMS}
            </Badge></TooltipTrigger>
            <TooltipContent>
                {_.map(value, (item, index) => {

                    if (index <= MAX_ITEMS - 1) return null;

                    return <p><DisplayValue
                        className='text-xs font-medium'
                        short={false} value={item} collection={props.structure?.collection ?? ""} /></p>;
                })}
            </TooltipContent>
        </Tooltip>

        }
    </div>


}

export default IDsItem;