'use client';
import { useFocusableGroup } from '@fluentui/react-tabster';
import { extent as d3Extent, max as d3Max } from 'd3-array';
import { scaleLinear as d3ScaleLinear } from 'd3-scale';
import { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';
import * as React from 'react';
import { useRtl } from '../../utilities/index';
import { useSparklineStyles } from './useSparklineStyles.styles';
/**
 * Sparkline is the context wrapper and container for all Sparkline content/controls,
 * It has no direct style or slot opinions.
 *
 * Sparkline also provides API interfaces for callbacks that will occur on navigation events.
 */ export const Sparkline = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
    let margin = {
        top: 2,
        right: 0,
        bottom: 0,
        left: 0
    };
    let x;
    let y;
    let _emptyChartId = '_SparklineChart_empty';
    let _isRTL = 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 d3Line().x((d)=>x(d.x)).y((d)=>y(d.y)).curve(d3curveLinear);
    }, [
        x,
        y
    ]);
    const area = React.useMemo(()=>{
        return d3Area().x((d)=>x(d.x)).y0(height).y1((d)=>y(d.y)).curve(d3curveLinear);
    }, [
        height,
        x,
        y
    ]);
    React.useEffect(()=>{
        if (!_isChartEmpty()) {
            // eslint-disable-next-line @typescript-eslint/no-shadow
            const _points = props.data.lineChartData[0].data;
            /* eslint-disable @typescript-eslint/no-explicit-any */ const [xMin, xMax] = d3Extent(_points, (d)=>d.x);
            // eslint-disable-next-line react-hooks/exhaustive-deps
            x = d3ScaleLinear().domain([
                xMin,
                xMax
            ]).range([
                margin.left,
                width - margin.right
            ]);
            // eslint-disable-next-line react-hooks/exhaustive-deps
            y = d3ScaleLinear()/* eslint-disable @typescript-eslint/no-explicit-any */ .domain([
                0,
                d3Max(_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 = useSparklineStyles(props);
    const focusAttributes = 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';
