/*!
 * 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 { useThematic } from '@thematic/react';
import { memo, useMemo } from 'react';
import { getValue } from '../ArqueroDetailsList.utils.js';
import { useCellDimensions, useFormattedNumber } from '../hooks/index.js';
/**
 * Basic endering of number values.
 */ export const NumberMagnitudeCell = /*#__PURE__*/ memo(function NumberMagnitudeCell({ item , column , textAlign ='right' , numberFormat , color , magnitude =0 ,  }) {
    const theme = useThematic();
    const barColor = useMemo(()=>color || theme.rect().fill().hex(), [
        theme,
        color
    ]);
    const value = getValue(item, column);
    const printed = useFormattedNumber(value, numberFormat);
    const dimensions = useCellDimensions(column);
    const { width , height  } = dimensions;
    const textFill = useMemo(()=>theme.text().fill().hex(), [
        theme
    ]);
    const size = magnitude * width;
    return /*#__PURE__*/ _jsx("div", {
        style: {
            textAlign
        },
        children: /*#__PURE__*/ _jsxs("svg", {
            width: width,
            height: height,
            children: [
                /*#__PURE__*/ _jsx("rect", {
                    width: size,
                    height: height,
                    x: width - size,
                    fill: barColor
                }),
                /*#__PURE__*/ _jsx("text", {
                    fill: textFill,
                    y: height / 2 + 1,
                    x: width - 2,
                    dominantBaseline: 'middle',
                    textAnchor: 'end',
                    children: printed
                })
            ]
        })
    });
});
