'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Sparkline", {
    enumerable: true,
    get: function() {
        return Sparkline;
    }
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reacttabster = require("@fluentui/react-tabster");
const _d3array = require("d3-array");
const _d3scale = require("d3-scale");
const _d3shape = require("d3-shape");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _index = require("../../utilities/index");
const _useSparklineStylesstyles = require("./useSparklineStyles.styles");
const Sparkline = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
    const margin = {
        top: 2,
        right: 0,
        bottom: 0,
        left: 0
    };
    let x;
    let y;
    const _emptyChartId = '_SparklineChart_empty';
    const _isRTL = (0, _index.useRtl)();
    const [points, setPoints] = _react.useState([]);
    var _props_width;
    // Use props with default fallbacks instead of hardcoded values
    const width = (_props_width = props.width) !== null && _props_width !== void 0 ? _props_width : 80;
    var _props_height;
    const height = (_props_height = props.height) !== null && _props_height !== void 0 ? _props_height : 20;
    var _props_valueTextWidth;
    const valueTextWidth = (_props_valueTextWidth = props.valueTextWidth) !== null && _props_valueTextWidth !== void 0 ? _props_valueTextWidth : 80;
    const line = _react.useMemo(()=>{
        return (0, _d3shape.line)().x((d)=>x(d.x)).y((d)=>y(d.y)).curve(_d3shape.curveLinear);
    }, [
        x,
        y
    ]);
    const area = _react.useMemo(()=>{
        return (0, _d3shape.area)().x((d)=>x(d.x)).y0(height).y1((d)=>y(d.y)).curve(_d3shape.curveLinear);
    }, [
        height,
        x,
        y
    ]);
    _react.useEffect(()=>{
        if (!_isChartEmpty()) {
            const _points = props.data.lineChartData[0].data;
            /* eslint-disable @typescript-eslint/no-explicit-any */ const [xMin, xMax] = (0, _d3array.extent)(_points, (d)=>d.x);
            // eslint-disable-next-line react-hooks/exhaustive-deps
            x = (0, _d3scale.scaleLinear)().domain([
                xMin,
                xMax
            ]).range([
                margin.left,
                width - margin.right
            ]);
            // eslint-disable-next-line react-hooks/exhaustive-deps
            y = (0, _d3scale.scaleLinear)()/* eslint-disable @typescript-eslint/no-explicit-any */ .domain([
                0,
                (0, _d3array.max)(_points, (d)=>d.y)
            ]).range([
                height - margin.bottom,
                margin.top
            ]);
            setPoints(_points);
        }
    }, []);
    const { data } = props;
    function _isChartEmpty() {
        return !(data && data.lineChartData && data.lineChartData.length > 0 && data.lineChartData.filter((item)=>item.data.length === 0).length === 0);
    }
    function drawSparkline() {
        if (!line || !area) {
            return null;
        }
        return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("path", {
            className: "line",
            d: line(points),
            fill: 'transparent',
            opacity: 1,
            strokeWidth: 2,
            stroke: data.lineChartData[0].color
        }), /*#__PURE__*/ _react.createElement("path", {
            className: "area",
            d: area(points),
            opacity: 1,
            fillOpacity: 0.2,
            fill: data.lineChartData[0].color,
            role: "img",
            "aria-hidden": true
        }));
    }
    const classes = (0, _useSparklineStylesstyles.useSparklineStyles)(props);
    const focusAttributes = (0, _reacttabster.useFocusableGroup)();
    return !_isChartEmpty() ? /*#__PURE__*/ _react.createElement("div", {
        className: classes.inlineBlock,
        ...focusAttributes
    }, width >= 50 && height >= 16 ? /*#__PURE__*/ _react.createElement("svg", {
        width: width,
        height: height,
        "aria-label": `Sparkline with label ${data.lineChartData[0].legend}`,
        tabIndex: 0
    }, points ? drawSparkline() : null) : /*#__PURE__*/ _react.createElement(_react.Fragment, null), props.showLegend && props.data.lineChartData[0].legend ? /*#__PURE__*/ _react.createElement("svg", {
        width: valueTextWidth,
        height: height
    }, /*#__PURE__*/ _react.createElement("text", {
        x: "0%",
        textAnchor: _isRTL ? 'end' : 'start',
        dx: 8,
        y: "100%",
        dy: -5,
        className: classes.valueText
    }, props.data.lineChartData[0].legend)) : /*#__PURE__*/ _react.createElement(_react.Fragment, null)) : /*#__PURE__*/ _react.createElement("div", {
        id: _emptyChartId,
        role: 'alert',
        style: {
            opacity: '0'
        },
        "aria-label": 'Graph has no data to display'
    });
});
Sparkline.displayName = 'Sparkline';
