/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { formatIfNumber } from '@datashaper/tables';
import { useTheme } from '@fluentui/react';
import upperFirst from 'lodash-es/upperFirst.js';
import { memo, useMemo } from 'react';
import { STATS_HEADER_ITEM_HEIGHT } from '../ArqueroDetailsList.constants.js';
import { StatsColumnType } from '../ArqueroDetailsList.types.js';
const pretty = {
    distinct: 'unique',
    invalid: 'empty'
};
const DEFAULT_STATS = [
    StatsColumnType.Type,
    StatsColumnType.Min,
    StatsColumnType.Max,
    StatsColumnType.Distinct,
    StatsColumnType.Invalid, 
];
/**
 * Renders a column header with basic stats.
 * The list of stats is configurable, but we aren't exposing that in the table yet.
 * Note that the size is fixed to accommodate only four, so we would need a dynamic header size.
 */ export const StatsColumnHeader = /*#__PURE__*/ memo(function StatsColumnHeader({ field , stats =DEFAULT_STATS , column , onClick ,  }) {
    const theme = useTheme();
    const cells = useMemo(()=>{
        const st = field.metadata || {};
        return stats.map((stat)=>{
            // data type is on the field, not the meta...
            const value = stat === StatsColumnType.Type ? field.type : st[stat];
            return /*#__PURE__*/ _jsx(StatCell, {
                name: stat,
                value: value
            }, `${column.key}-${stat}`);
        });
    }, [
        field,
        column,
        stats
    ]);
    const title = useTooltip(field.metadata);
    const styles = useMemo(()=>{
        return {
            height: stats.length * STATS_HEADER_ITEM_HEIGHT,
            fontWeight: 'normal',
            fontSize: 10,
            color: theme.palette.neutralSecondary,
            cursor: onClick ? 'pointer' : 'inherit'
        };
    }, [
        onClick,
        theme,
        stats
    ]);
    return /*#__PURE__*/ _jsx("div", {
        onClick: (e)=>onClick && onClick(e, column, field),
        title: title,
        style: styles,
        children: cells
    });
});
const StatCell = ({ name , value ,  })=>{
    return value !== undefined ? /*#__PURE__*/ _jsxs("div", {
        style: {
            height: STATS_HEADER_ITEM_HEIGHT,
            display: 'flex',
            justifyContent: 'space-between',
            paddingLeft: 4,
            paddingRight: 4,
            lineHeight: 1
        },
        children: [
            /*#__PURE__*/ _jsxs("div", {
                style: {
                    textTransform: 'capitalize'
                },
                children: [
                    pretty[name] || name,
                    ":"
                ]
            }),
            /*#__PURE__*/ _jsx("div", {
                style: {
                    maxWidth: '100%',
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis'
                },
                children: formatIfNumber(value)
            })
        ]
    }) : null;
};
function useTooltip(stats) {
    return useMemo(()=>{
        const { bins , categories , ...nobins } = stats || {};
        return Object.entries(nobins).reduce((acc, cur, idx)=>{
            const [key, value] = cur;
            const nice = upperFirst(pretty[key] || key);
            return acc + (idx > 0 ? '\n' : '') + `${nice}: ${formatIfNumber(value)}`;
        }, '');
    }, [
        stats
    ]);
}
