/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx } from "react/jsx-runtime";
import { memo, useMemo } from 'react';
import { getValue } from '../ArqueroDetailsList.utils.js';
const CELL_LENGTH = 5;
const TOOLTIP_LENGTH = 20;
/**
 * Basic rendering of array values.
 */ export const ArrayCell = /*#__PURE__*/ memo(function ArrayCell({ item , column , textAlign ='left' ,  }) {
    const values = getValue(item, column) || [];
    const printed = usePrinted(values);
    const tooltip = useTooltip(values);
    return /*#__PURE__*/ _jsx("div", {
        title: tooltip,
        style: {
            textAlign
        },
        children: printed
    });
});
function usePrinted(values, length = CELL_LENGTH) {
    return useMemo(()=>{
        const arr = `[${values.slice(0, length).join(', ')}]`;
        return values.length > length ? `${arr}...` : arr;
    }, [
        values,
        length
    ]);
}
function useTooltip(values, length = TOOLTIP_LENGTH) {
    return useMemo(()=>{
        let tooltip = values.slice(0, length).join('\n');
        if (values.length > length) {
            tooltip += `\n...\n(+${values.length - length} more)`;
        }
        return tooltip;
    }, [
        values,
        length
    ]);
}
