"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NestedOverlayLabels = void 0;
const react_1 = __importStar(require("react"));
const Text_1 = require("../Text");
const inlines_1 = require("inlines");
const pretty_number_1 = require("@based/pretty-number");
const varsUtilities_1 = require("../../varsUtilities");
const hooks_1 = require("../../hooks");
const NestedOverlayLabels = ({ xPos, yPos, objKey, objValue, valueFormat, direction, value, label, }) => {
    const { width, height } = (0, hooks_1.useWindowResize)();
    const nestedLabelRef = (0, react_1.useRef)();
    const labelWidth = nestedLabelRef?.current?.clientWidth;
    const labelHeight = nestedLabelRef?.current?.clientHeight;
    return (react_1.default.createElement(inlines_1.styled.div, { ref: nestedLabelRef, style: {
            backgroundColor: (0, varsUtilities_1.color)('background', 'default', 'muted'),
            zIndex: 1,
            borderRadius: 4,
            position: 'absolute',
            left: xPos,
            top: yPos,
            transform: yPos + labelHeight > height - 20 && xPos + labelWidth > width - 20
                ? 'translateY(-100%) translateX(-110%)'
                : yPos + labelHeight > height - 20
                    ? 'translateY(-100%) translateX(0%)'
                    : xPos + labelWidth > width - 20
                        ? 'translateY(0%) translateX(-100%)'
                        : 'translateY(0%) translateX(0%)',
            border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralNormal')}`,
        } },
        label && (react_1.default.createElement(Text_1.Text, { weight: "medium", size: 16, style: {
                padding: '4px 12px',
                width: '100%',
                borderBottom: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralNormal')}`,
            } }, label)),
        react_1.default.createElement(Text_1.Text, { size: 16, style: {
                padding: '4px 12px',
                width: '100%',
                borderBottom: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralNormal')}`,
            } },
            react_1.default.createElement(inlines_1.styled.div, { style: {
                    width: 8,
                    height: 8,
                    borderRadius: 4,
                    display: 'inline-block',
                    marginRight: 8,
                    backgroundColor: (0, varsUtilities_1.color)('nonSemanticBackground', (0, varsUtilities_1.colorHash)('nonSemanticBackground', objKey), 'strong'),
                } }),
            objKey,
            ": ",
            react_1.default.createElement("b", null, (0, pretty_number_1.prettyNumber)(objValue, valueFormat))),
        react_1.default.createElement(inlines_1.styled.div, { style: { padding: '4px 12px' } }, Object.entries(value)
            .filter((item) => item[0] !== objKey)
            .map((item, idx) => (react_1.default.createElement(Text_1.Text, { key: idx },
            react_1.default.createElement(inlines_1.styled.div, { style: {
                    width: 5,
                    height: 5,
                    borderRadius: '50%',
                    display: 'inline-block',
                    marginRight: 6,
                    backgroundColor: (0, varsUtilities_1.color)('nonSemanticBackground', (0, varsUtilities_1.colorHash)('nonSemanticBackground', item[0]), 'strong'),
                } }),
            ' ',
            item[0],
            ": ",
            (0, pretty_number_1.prettyNumber)(item[1], valueFormat)))))));
};
exports.NestedOverlayLabels = NestedOverlayLabels;
//# sourceMappingURL=NestedOverlayLabels.js.map