var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React, { useEffect, useRef, useState } from 'react';
import { identity } from 'ramda';
import { PieChart, Pie, Cell } from 'recharts';
import { getGaugeIndicatorCoords } from './helpers';
import { MAX_RADIUS, ARC_WIDTH_AS_PERCENTAGES, TOP_INDICATOR_HEIGHT_AS_PERCENTAGES } from './constants';
import { useStyles } from './styles';
export var GaugeChart = function (_a) {
    var width = _a.width, height = _a.height, data = _a.data, value = _a.value, label = _a.label, _b = _a.renderValue, renderValue = _b === void 0 ? identity : _b, _c = _a.isAnimationActive, isAnimationActive = _c === void 0 ? true : _c;
    var styles = useStyles();
    var labelElRef = useRef(null);
    var _d = useState(!isAnimationActive), animationIsEnd = _d[0], setAnimationIsEnd = _d[1];
    var _e = useState({ bottom: 0, top: 0, left: 0, right: 0 }), margin = _e[0], setMargin = _e[1];
    var _f = useState(0), textOffset = _f[0], setTextOffset = _f[1];
    var widthWithoutMargin = width - margin.left - margin.right;
    var heightWithoutMargin = height - margin.top - margin.bottom - (textOffset > 0 ? textOffset : 0);
    var outerRadius = Math.min(widthWithoutMargin / 2, heightWithoutMargin, MAX_RADIUS);
    var innerRadius = outerRadius - ARC_WIDTH_AS_PERCENTAGES * outerRadius;
    var cx = widthWithoutMargin / 2 + margin.left;
    var cy = heightWithoutMargin / 2 + outerRadius / 2 + margin.top;
    var chartData = data.map(function (item, name) { return (__assign(__assign({}, item), { name: name })); });
    var _g = getGaugeIndicatorCoords(value, chartData, cx, cy, outerRadius, innerRadius), x1 = _g.x1, y1 = _g.y1, x2 = _g.x2, y2 = _g.y2, x3 = _g.x3, y3 = _g.y3;
    useEffect(function () {
        var _a;
        if (animationIsEnd) {
            var clientHeight = ((_a = labelElRef === null || labelElRef === void 0 ? void 0 : labelElRef.current) !== null && _a !== void 0 ? _a : { clientHeight: 0 }).clientHeight;
            var textOffset_1 = Math.ceil(clientHeight) - 16;
            var verticalMargin_1 = Math.ceil(TOP_INDICATOR_HEIGHT_AS_PERCENTAGES * outerRadius);
            setTextOffset(textOffset_1);
            setMargin(function (prevMargin) { return (__assign(__assign({}, prevMargin), { bottom: verticalMargin_1, top: verticalMargin_1 })); });
        }
    }, [width, height, animationIsEnd]);
    return (React.createElement("div", { "data-reltio-id": "gauge-chart", className: styles.root, style: { width: width, height: height } },
        React.createElement(PieChart, { margin: { top: 0, bottom: 0, left: 0, right: 0 }, width: width, height: height },
            React.createElement(Pie, { className: styles.pie, dataKey: "value", startAngle: 180, endAngle: 0, data: chartData, cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius, stroke: "none", isAnimationActive: isAnimationActive, onAnimationEnd: function () { return setAnimationIsEnd(true); } }, data.map(function (entry, idx) { return (React.createElement(Cell, { key: idx, fill: entry.color })); })),
            React.createElement("path", { "data-reltio-id": "gauge-chart-indicator", className: styles.indicator, style: { opacity: animationIsEnd ? 1 : 0 }, d: "M".concat(x1, " ").concat(y1, "L").concat(x2, " ").concat(y2, " L").concat(x3, " ").concat(y3, " L").concat(x1, " ").concat(y1) })),
        React.createElement("div", { "data-reltio-id": "gauge-chart-text", className: styles.text, style: {
                top: "".concat(((cy - innerRadius) / height) * 100, "%"),
                bottom: "calc(".concat(((height - cy) / height) * 100, "% - ").concat(textOffset, "px)"),
                left: "".concat(((width - innerRadius * 2) / width / 2) * 100, "%"),
                right: "".concat(((width - innerRadius * 2) / width / 2) * 100, "%"),
                opacity: animationIsEnd ? 1 : 0
            } },
            React.createElement("div", { className: styles.value }, renderValue(value)),
            label && (React.createElement("div", { ref: labelElRef, className: styles.label }, label)))));
};
