"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Arc = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var d3_shape_1 = require("d3-shape");
var Utilities_1 = require("@fluentui/react/lib/Utilities");
var Arc_styles_1 = require("./Arc.styles");
var d3_format_1 = require("d3-format");
var index_1 = require("../../../utilities/index");
var Arc = /** @class */ (function (_super) {
    tslib_1.__extends(Arc, _super);
    function Arc() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {};
        _this.currentRef = React.createRef();
        _this._isRTL = (0, Utilities_1.getRTL)();
        _this._hoverOff = function () {
            _this.props.hoverLeaveCallback();
        };
        _this._onBlur = function () {
            _this.props.onBlurCallback();
        };
        _this._getAriaLabel = function () {
            var _a;
            var point = _this.props.data.data;
            var legend = point.xAxisCalloutData || point.legend;
            var yValue = point.yAxisCalloutData || point.data || 0;
            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || (legend ? "".concat(legend, ", ") : '') + "".concat(yValue, ".");
        };
        _this._shouldHighlightArc = function (legend) {
            var activeArc = _this.props.activeArc;
            // If no activeArc is provided, highlight all arcs. Otherwise, only highlight the arcs that are active.
            return !activeArc || activeArc.length === 0 || legend === undefined || activeArc.includes(legend);
        };
        _this._renderArcLabel = function (className) {
            var _a = _this.props, arc = _a.arc, data = _a.data, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, showLabelsInPercent = _a.showLabelsInPercent, totalValue = _a.totalValue, hideLabels = _a.hideLabels;
            if (hideLabels ||
                Math.abs(data.endAngle - data.startAngle) < Math.PI / 12 ||
                !_this._shouldHighlightArc(data.data.legend)) {
                return null;
            }
            var _b = arc.centroid(data), base = _b[0], perp = _b[1];
            var hyp = Math.sqrt(base * base + perp * perp);
            var labelRadius = Math.max(innerRadius, outerRadius) + 2;
            var angle = (data.startAngle + data.endAngle) / 2;
            var arcValue = data.value;
            return (React.createElement("text", { x: (hyp === 0 ? 0 : base / hyp) * labelRadius, y: (hyp === 0 ? 0 : perp / hyp) * labelRadius, textAnchor: angle > Math.PI !== _this._isRTL ? 'end' : 'start', dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto', className: className, "aria-hidden": true }, showLabelsInPercent
                ? (0, d3_format_1.format)('.0%')(totalValue === 0 ? 0 : arcValue / totalValue)
                : (0, index_1.formatValueWithSIPrefix)(arcValue)));
        };
        return _this;
    }
    Arc.getDerivedStateFromProps = function (nextProps) {
        _updateChart(nextProps);
        return null;
    };
    Arc.prototype.updateChart = function (newProps) {
        _updateChart(newProps);
    };
    Arc.prototype.render = function () {
        var _a, _b, _c, _d, _e, _f, _g;
        var _h = this.props, arc = _h.arc, href = _h.href, focusedArcId = _h.focusedArcId, activeArc = _h.activeArc;
        var getClassNames = (0, Utilities_1.classNamesFunction)();
        var id = this.props.uniqText +
            (typeof this.props.data.data.legend === 'string' ? this.props.data.data.legend.replace(/\s+/g, '') : '') +
            this.props.data.data.data;
        var opacity = activeArc && activeArc.length > 0 ? (activeArc.includes((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.legend) ? 1 : 0.1) : 1;
        var startAngle = (_c = (_b = this.props.data) === null || _b === void 0 ? void 0 : _b.startAngle) !== null && _c !== void 0 ? _c : 0;
        var endAngle = ((_e = (_d = this.props.data) === null || _d === void 0 ? void 0 : _d.endAngle) !== null && _e !== void 0 ? _e : 0) - startAngle;
        var cornerRadius = this.props.roundCorners ? 3 : 0;
        var classNames = getClassNames(Arc_styles_1.getStyles, {
            solidFill: this.props.enableGradient ? 'transparent' : this.props.color,
            gradientFill: "conic-gradient(\n          from ".concat(startAngle, "rad,\n          ").concat(this.props.color, ",\n          ").concat(this.props.nextColor, " ").concat(endAngle, "rad\n        )"),
            href: href,
            theme: this.props.theme,
            opacity: opacity,
        });
        var clipId = (0, Utilities_1.getId)('Arc_clip') + "".concat(this.props.color, "_").concat(this.props.nextColor);
        return (React.createElement("g", { ref: this.currentRef },
            !!focusedArcId && focusedArcId === id && (React.createElement("path", { id: id + 'focusRing', d: arc.cornerRadius(cornerRadius)(this.props.focusData), className: classNames.focusRing })),
            React.createElement("path", { id: id, d: arc.cornerRadius(cornerRadius)(this.props.data), onFocus: this._onFocus.bind(this, this.props.data.data, id), className: classNames.root, "data-is-focusable": this._shouldHighlightArc(this.props.data.data.legend) || ((_f = this.props.activeArc) === null || _f === void 0 ? void 0 : _f.length) === 0, onMouseOver: this._hoverOn.bind(this, this.props.data.data), onMouseMove: this._hoverOn.bind(this, this.props.data.data), onMouseLeave: this._hoverOff, onBlur: this._onBlur, onClick: href ? this._redirectToUrl.bind(this, href) : (_g = this.props.data) === null || _g === void 0 ? void 0 : _g.data.onClick, "aria-label": this._getAriaLabel(), role: "img" }),
            this._renderArcLabel(classNames.arcLabel),
            this.props.enableGradient && (React.createElement(React.Fragment, null,
                React.createElement("clipPath", { id: clipId },
                    React.createElement("path", { d: arc.cornerRadius(cornerRadius)(this.props.data) })),
                React.createElement("foreignObject", { x: "-50%", y: "-50%", width: "100%", height: "100%", clipPath: "url(#".concat(clipId, ")") },
                    React.createElement("div", { className: classNames.gradientArc }))))));
    };
    Arc.prototype._onFocus = function (data, id) {
        this.props.onFocusCallback(data, id, this.currentRef.current);
    };
    Arc.prototype._hoverOn = function (data, mouseEvent) {
        mouseEvent.persist();
        this.props.hoverOnCallback(data, mouseEvent);
    };
    Arc.prototype._redirectToUrl = function (href) {
        href ? (window.location.href = href) : '';
    };
    Arc.defaultProps = {
        arc: (0, d3_shape_1.arc)(),
    };
    return Arc;
}(React.Component));
exports.Arc = Arc;
function _updateChart(newProps) {
    newProps.arc.innerRadius(newProps.innerRadius);
    newProps.arc.outerRadius(newProps.outerRadius);
}
//# sourceMappingURL=Arc.js.map