"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LabeledArc = 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 utilities_1 = require("../../../utilities/utilities");
var SVGTooltipText_1 = require("../../../utilities/SVGTooltipText");
var locale_util_1 = require("../../../utilities/locale-util");
var Arc = /** @class */ (function (_super) {
    tslib_1.__extends(Arc, _super);
    function Arc(props) {
        var _this = _super.call(this, props) || this;
        _this.updateChart = function (newProps) {
            _updateChart(newProps);
        };
        _this._onFocus = function () {
            _this.setState({ isArcFocused: true });
        };
        _this._onBlur = function () {
            _this.setState({ isArcFocused: false });
        };
        _this.state = {
            isArcFocused: false,
        };
        _this._arcId = (0, Utilities_1.getId)('piechart_arc');
        return _this;
    }
    Arc.getDerivedStateFromProps = function (nextProps) {
        _updateChart(nextProps);
        return null;
    };
    Arc.prototype.render = function () {
        var _this = this;
        var _a;
        var arc = this.props.arc;
        var getClassNames = (0, Utilities_1.classNamesFunction)();
        var classNames = getClassNames(function (props) { return (0, Arc_styles_1.getStyles)(props, _this.props.theme); }, tslib_1.__assign({}, this.props));
        return (React.createElement("path", { d: arc(this.props.data), className: "".concat(this.state.isArcFocused ? classNames.arcRootFocussed : classNames.arcRoot), onClick: (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.onClick }));
    };
    Arc.defaultProps = {
        arc: (0, d3_shape_1.arc)(),
    };
    return Arc;
}(React.Component));
exports.Arc = Arc;
var LabeledArc = /** @class */ (function (_super) {
    tslib_1.__extends(LabeledArc, _super);
    function LabeledArc(props) {
        var _this = _super.call(this, props) || this;
        _this._isRTL = (0, Utilities_1.getRTL)();
        _this._arcId = (0, Utilities_1.getId)('piechart_arc');
        return _this;
    }
    LabeledArc.prototype.render = function () {
        var _this = this;
        var _a, _b;
        var _c = this.props, data = _c.data, culture = _c.culture;
        var gap = 4;
        // placing the labels on the outside arc
        var _d = (0, d3_shape_1.arc)().centroid({
            endAngle: (data === null || data === void 0 ? void 0 : data.endAngle) || 0,
            startAngle: (data === null || data === void 0 ? void 0 : data.startAngle) || 0,
            padAngle: data === null || data === void 0 ? void 0 : data.padAngle,
            innerRadius: ((_a = this.props) === null || _a === void 0 ? void 0 : _a.outerRadius) || 0,
            outerRadius: ((_b = this.props) === null || _b === void 0 ? void 0 : _b.outerRadius) || 0 + gap,
        }), labelX = _d[0], labelY = _d[1];
        var getClassNames = (0, Utilities_1.classNamesFunction)();
        var classNames = getClassNames(function (props) { return (0, Arc_styles_1.getStyles)(props, _this.props.theme); });
        var angle = (((data === null || data === void 0 ? void 0 : data.startAngle) || 0) + ((data === null || data === void 0 ? void 0 : data.endAngle) || 0)) / 2;
        var content = "".concat(data === null || data === void 0 ? void 0 : data.data.x, "-").concat((0, locale_util_1.convertToLocaleString)(data === null || data === void 0 ? void 0 : data.data.y, culture));
        return (React.createElement("g", { className: "".concat(classNames.arc, " arc"), "data-is-focusable": true, id: this._arcId, onFocus: this._onFocus, onBlur: this._onBlur, "aria-label": content, role: "img" },
            _super.prototype.render.call(this),
            React.createElement(SVGTooltipText_1.SVGTooltipText, { content: content, textProps: {
                    x: labelX + (angle > Math.PI ? -10 : 10),
                    y: labelY + (angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 10 : -10),
                    dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto',
                    textAnchor: (!this._isRTL && angle > Math.PI) || (this._isRTL && angle < Math.PI) ? 'end' : 'start',
                    'aria-label': "".concat(data === null || data === void 0 ? void 0 : data.data.x, "-").concat((0, locale_util_1.convertToLocaleString)(data === null || data === void 0 ? void 0 : data.data.y, culture)),
                    className: classNames.arcText,
                }, isTooltipVisibleProp: this.state.isArcFocused, shouldReceiveFocus: false, maxWidth: 40, wrapContent: utilities_1.wrapContent })));
    };
    return LabeledArc;
}(Arc));
exports.LabeledArc = LabeledArc;
function _updateChart(newProps) {
    newProps.arc.innerRadius(newProps.innerRadius);
    newProps.arc.outerRadius(newProps.outerRadius);
}
//# sourceMappingURL=Arc.js.map