import { __extends } from "tslib";
import * as React from 'react';
import { pie as d3Pie } from 'd3-shape';
import { Arc } from '../Arc/index';
import { classNamesFunction } from '@fluentui/react/lib/Utilities';
import { getStyles } from './Pie.styles';
import { getNextGradient, wrapTextInsideDonut } from '../../../utilities/index';
var getClassNames = classNamesFunction();
var TEXT_PADDING = 5;
var Pie = /** @class */ (function (_super) {
    __extends(Pie, _super);
    function Pie(props) {
        var _this = _super.call(this, props) || this;
        _this.arcGenerator = function (d, i, focusData, href) {
            var _a, _b, _c, _d;
            var color = d && d.data && d.data.color;
            var nextColor = color;
            if (_this.props.enableGradient) {
                color = (_b = (_a = _this.props.data[i].gradient) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : getNextGradient(i, 0, _this.props.theme.isInverted)[0];
                nextColor = (_d = (_c = _this.props.data[i].gradient) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : getNextGradient(i, 0, _this.props.theme.isInverted)[1];
            }
            return (React.createElement(Arc, { key: i, data: d, focusData: focusData, innerRadius: _this.props.innerRadius, outerRadius: _this.props.outerRadius, color: color, nextColor: nextColor, enableGradient: _this.props.enableGradient, roundCorners: _this.props.roundCorners, onFocusCallback: _this._focusCallback, hoverOnCallback: _this._hoverCallback, onBlurCallback: _this.props.onBlurCallback, hoverLeaveCallback: _this.props.hoverLeaveCallback, uniqText: _this.props.uniqText, activeArc: _this.props.activeArc, href: href, calloutId: _this.props.calloutId, valueInsideDonut: _this.props.valueInsideDonut, theme: _this.props.theme, focusedArcId: _this.props.focusedArcId, showLabelsInPercent: _this.props.showLabelsInPercent, totalValue: _this._totalValue, hideLabels: _this.props.hideLabels }));
        };
        _this._focusCallback = function (data, id, e) {
            _this.props.onFocusCallback(data, id, e);
        };
        _this._computeTotalValue = function () {
            var totalValue = 0;
            _this.props.data.forEach(function (arc) {
                totalValue += arc.data;
            });
            return totalValue;
        };
        _this._hoverCallback = _this._hoverCallback.bind(_this);
        _this._pieForFocusRing = d3Pie()
            .sort(null)
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            .value(function (d) { return d.data; })
            .padAngle(0);
        return _this;
    }
    Pie.prototype.render = function () {
        var _this = this;
        var _a = this.props, pie = _a.pie, data = _a.data;
        var focusData = this._pieForFocusRing(data);
        var piechart = pie(data);
        var translate = "translate(".concat(this.props.width / 2, ", ").concat(this.props.height / 2, ")");
        var classNames = getClassNames(getStyles, {
            theme: this.props.theme,
        });
        this._totalValue = this._computeTotalValue();
        return (React.createElement("g", { transform: translate },
            piechart.map(function (d, i) { return _this.arcGenerator(d, i, focusData[i], _this.props.href); }),
            this.props.valueInsideDonut && (React.createElement("text", { y: 5, textAnchor: "middle", dominantBaseline: "middle", className: classNames.insideDonutString }, this.props.valueInsideDonut))));
    };
    Pie.prototype.componentDidUpdate = function () {
        var classNames = getClassNames(getStyles, {
            theme: this.props.theme,
        });
        wrapTextInsideDonut(classNames.insideDonutString, this.props.innerRadius * 2 - TEXT_PADDING);
    };
    Pie.prototype._hoverCallback = function (data, e) {
        this.props.hoverOnCallback(data, e);
    };
    Pie.defaultProps = {
        pie: d3Pie()
            .sort(null)
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            .value(function (d) { return d.data; })
            .padAngle(0.02),
    };
    return Pie;
}(React.Component));
export { Pie };
//# sourceMappingURL=Pie.js.map