//
// Copyright 2023 DXOS.org
//
import { sentenceCase } from 'change-case';
import { format } from 'date-fns/format';
import { formatDistance } from 'date-fns/formatDistance';
import React from 'react';
import { log } from '@dxos/log';
// TODO(burdon): Factor out styles.
const styles = {
    key: 'text-mono text-green-500',
    unit: 'text-sm text-neutral-400 ml-1',
};
export const PropertySchemaFormat = {
    key: () => ({ format: (value) => React.createElement("span", { className: styles.key }, value.truncate()) }),
    number: (unit) => ({
        format: (value) => (React.createElement(React.Fragment, null,
            React.createElement("span", null, value?.toLocaleString()),
            React.createElement("span", { className: styles.unit }, unit))),
    }),
    unit: (unit, precision = 2) => ({
        format: (value) => {
            const e = Math.floor(Math.log(value) / Math.log(1024));
            return (React.createElement(React.Fragment, null,
                React.createElement("span", null, (value / Math.pow(1024, e)).toFixed(precision)),
                React.createElement("span", { className: styles.unit }, (e > 0 ? 'kMGTP'.charAt(e - 1) : '') + unit)));
        },
    }),
    percent: (precision = 0) => ({
        format: (value) => (React.createElement(React.Fragment, null,
            React.createElement("span", null, value?.toFixed(precision)),
            React.createElement("span", { className: styles.unit }, "%"))),
    }),
    date: (options = {}) => ({
        format: (value) => {
            const date = value instanceof Date ? value : new Date(value);
            const parts = [];
            if (options.format) {
                parts.push(format(date, options.format));
            }
            if (options.relative) {
                parts.push(formatDistance(date, Date.now(), { addSuffix: true }));
            }
            if (parts.length === 0) {
                parts.push(date.toISOString());
            }
            return (React.createElement(React.Fragment, null,
                React.createElement("span", null, parts[0]),
                parts.length > 1 && React.createElement("span", { className: styles.unit },
                    "(",
                    parts[1],
                    ")")));
        },
    }),
};
export const defaultSlots = {
    key: {
        className: 'pli-4 align-baseline text-neutral-500 overflow-hidden is-40 text-sm',
    },
};
export const PropertiesTable = ({ schema, object, slots = defaultSlots }) => {
    const format = (key, value) => {
        try {
            return schema?.[key]?.format(value) ?? String(value);
        }
        catch (err) {
            log.catch(err);
            return '<error>';
        }
    };
    return (React.createElement("table", { className: 'table-fixed border-collapse' },
        React.createElement("tbody", null, Object.entries(object).map(([key, value]) => (React.createElement("tr", { key: key, className: 'align-baseline leading-6' },
            React.createElement("td", { className: slots?.key?.className }, sentenceCase(key).toLowerCase()),
            React.createElement("td", null,
                React.createElement("div", { className: 'font-mono' }, format(key, value)))))))));
};
//# sourceMappingURL=PropertiesTable.js.map