import React, { useRef } from 'react';
import { nanoid } from 'nanoid';
import { Text } from 'recharts';
import { useClickableChartStyle } from '../../../hooks/useClickableChartStyle';
import { useStyles } from './styles';
export var CustomizedContent = function (_a) {
    var x = _a.x, y = _a.y, width = _a.width, height = _a.height, label = _a.label, onClick = _a.onClick, group = _a.group;
    var styles = useStyles();
    var clickable = useClickableChartStyle(onClick);
    var clipPathId = useRef(nanoid()).current;
    var strokeWidth = 2;
    var handleClick = function () {
        if (!onClick)
            return;
        onClick(group);
    };
    return (React.createElement("g", { "data-reltio-id": "tree-chart-content", className: clickable, onClick: handleClick },
        React.createElement("clipPath", { id: clipPathId },
            React.createElement("rect", { x: x + strokeWidth, y: y + strokeWidth, width: Math.max(width - strokeWidth * 2, 0), height: Math.max(height - strokeWidth * 2, 0) })),
        React.createElement("rect", { x: x, y: y, width: width, height: height, strokeWidth: strokeWidth, className: styles.treeBlock }),
        React.createElement(Text, { clipPath: "url(#".concat(clipPathId, ")"), textAnchor: "middle", verticalAnchor: "middle", width: width, x: x + width / 2, y: y + height / 2, className: styles.treeLabel }, label)));
};
