import { __assign, __extends } from "tslib";
import * as React from 'react';
import { arc as d3Arc } from 'd3-shape';
import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
import { getStyles } from './Arc.styles';
import { wrapContent } from '../../../utilities/utilities';
import { SVGTooltipText } from '../../../utilities/SVGTooltipText';
import { formatToLocaleString } from '@fluentui/chart-utilities';
var Arc = /** @class */ (function (_super) {
    __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 = 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 = classNamesFunction();
        var classNames = getClassNames(function (props) { return getStyles(props, _this.props.theme); }, __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: d3Arc(),
    };
    return Arc;
}(React.Component));
export { Arc };
var LabeledArc = /** @class */ (function (_super) {
    __extends(LabeledArc, _super);
    function LabeledArc(props) {
        var _this = _super.call(this, props) || this;
        _this._isRTL = getRTL();
        _this._arcId = 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 = d3Arc().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 = classNamesFunction();
        var classNames = getClassNames(function (props) { return 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(formatToLocaleString(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, { 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(formatToLocaleString(data === null || data === void 0 ? void 0 : data.data.y, culture)),
                    className: classNames.arcText,
                }, isTooltipVisibleProp: this.state.isArcFocused, shouldReceiveFocus: false, maxWidth: 40, wrapContent: wrapContent })));
    };
    return LabeledArc;
}(Arc));
export { LabeledArc };
function _updateChart(newProps) {
    newProps.arc.innerRadius(newProps.innerRadius);
    newProps.arc.outerRadius(newProps.outerRadius);
}
//# sourceMappingURL=Arc.js.map