'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: all[name]
    });
}
_export(exports, {
    DEFAULT_ANNOTATION_BACKGROUND_OPACITY: function() {
        return DEFAULT_ANNOTATION_BACKGROUND_OPACITY;
    },
    DEFAULT_ANNOTATION_PADDING: function() {
        return DEFAULT_ANNOTATION_PADDING;
    },
    DEFAULT_CONNECTOR_ARROW: function() {
        return DEFAULT_CONNECTOR_ARROW;
    },
    DEFAULT_CONNECTOR_END_PADDING: function() {
        return DEFAULT_CONNECTOR_END_PADDING;
    },
    DEFAULT_CONNECTOR_START_PADDING: function() {
        return DEFAULT_CONNECTOR_START_PADDING;
    },
    DEFAULT_CONNECTOR_STROKE_WIDTH: function() {
        return DEFAULT_CONNECTOR_STROKE_WIDTH;
    },
    applyOpacityToColor: function() {
        return applyOpacityToColor;
    },
    chartAnnotationLayerClassNames: function() {
        return chartAnnotationLayerClassNames;
    },
    getDefaultAnnotationBackgroundColor: function() {
        return getDefaultAnnotationBackgroundColor;
    },
    getDefaultConnectorStrokeColor: function() {
        return getDefaultConnectorStrokeColor;
    },
    useChartAnnotationLayerStyles: function() {
        return useChartAnnotationLayerStyles;
    }
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _d3color = require("d3-color");
const DEFAULT_ANNOTATION_BACKGROUND_OPACITY = 0.8;
const DEFAULT_ANNOTATION_PADDING = '4px 8px';
const DEFAULT_CONNECTOR_START_PADDING = 12;
const DEFAULT_CONNECTOR_END_PADDING = 0;
const DEFAULT_CONNECTOR_STROKE_WIDTH = 2;
const DEFAULT_CONNECTOR_ARROW = 'end';
const applyOpacityToColor = (color, opacity, options)=>{
    if (!color) {
        return undefined;
    }
    const parsed = (0, _d3color.color)(color);
    if (!parsed) {
        return color;
    }
    const originalOpacity = typeof parsed.opacity === 'number' ? parsed.opacity : 1;
    var _options_preserveOriginalOpacity;
    const preserveOriginalOpacity = (_options_preserveOriginalOpacity = options === null || options === void 0 ? void 0 : options.preserveOriginalOpacity) !== null && _options_preserveOriginalOpacity !== void 0 ? _options_preserveOriginalOpacity : true;
    if (preserveOriginalOpacity && originalOpacity < 1) {
        return parsed.toString();
    }
    parsed.opacity = Math.max(0, Math.min(1, opacity));
    return parsed.toString();
};
const getDefaultAnnotationBackgroundColor = ()=>applyOpacityToColor(_reacttheme.tokens.colorNeutralBackground1, DEFAULT_ANNOTATION_BACKGROUND_OPACITY);
const getDefaultConnectorStrokeColor = ()=>_reacttheme.tokens.colorNeutralForeground1;
const chartAnnotationLayerClassNames = {
    root: 'fui-chartAnnotationLayer__root',
    annotation: 'fui-chartAnnotationLayer__annotation',
    connectorLayer: 'fui-chartAnnotationLayer__connectorLayer',
    measurement: 'fui-chartAnnotationLayer__measurement',
    annotationContent: 'fui-chartAnnotationLayer__annotationContent',
    annotationForeignObject: 'fui-chartAnnotationLayer__annotationForeignObject',
    annotationContentInteractive: 'fui-chartAnnotationLayer__annotationContentInteractive',
    annotationForeignObjectInteractive: 'fui-chartAnnotationLayer__annotationForeignObjectInteractive',
    connectorGroup: 'fui-chartAnnotationLayer__connectorGroup'
};
/**
 * Base Styles
 */ const useStyles = (0, _react.makeStyles)({
    root: {
        position: 'absolute',
        top: '0',
        left: '0',
        right: '0',
        bottom: '0',
        width: '100%',
        height: '100%',
        pointerEvents: 'none',
        overflow: 'visible',
        zIndex: 1
    },
    annotation: {
        ..._reacttheme.typographyStyles.caption1,
        position: 'absolute',
        pointerEvents: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        color: _reacttheme.tokens.colorNeutralForeground1,
        paddingTop: '4px',
        paddingBottom: '4px',
        paddingLeft: '8px',
        paddingRight: '8px',
        borderRadius: _reacttheme.tokens.borderRadiusMedium,
        boxShadow: _reacttheme.tokens.shadow16,
        border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
        whiteSpace: 'pre-wrap',
        zIndex: 2
    },
    connectorLayer: {
        position: 'absolute',
        top: '0',
        left: '0',
        width: '100%',
        height: '100%',
        pointerEvents: 'none',
        overflow: 'visible'
    },
    measurement: {
        position: 'absolute',
        visibility: 'hidden',
        pointerEvents: 'none'
    },
    annotationContent: {
        width: '100%',
        height: '100%',
        pointerEvents: 'none'
    },
    annotationForeignObject: {
        overflow: 'visible',
        pointerEvents: 'none'
    },
    annotationContentInteractive: {
        pointerEvents: 'auto'
    },
    annotationForeignObjectInteractive: {
        pointerEvents: 'auto'
    },
    connectorGroup: {
        pointerEvents: 'none'
    }
});
const useChartAnnotationLayerStyles = (props)=>{
    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8;
    const baseStyles = useStyles();
    return {
        root: (0, _react.mergeClasses)(chartAnnotationLayerClassNames.root, baseStyles.root, props.className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
        annotation: (0, _react.mergeClasses)(chartAnnotationLayerClassNames.annotation, baseStyles.annotation, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.annotation),
        connectorLayer: (0, _react.mergeClasses)(chartAnnotationLayerClassNames.connectorLayer, baseStyles.connectorLayer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.connectorLayer),
        measurement: (0, _react.mergeClasses)(chartAnnotationLayerClassNames.measurement, baseStyles.measurement, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.measurement),
        annotationContent: (0, _react.mergeClasses)(chartAnnotationLayerClassNames.annotationContent, baseStyles.annotationContent, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.annotationContent),
        annotationForeignObject: (0, _react.mergeClasses)(chartAnnotationLayerClassNames.annotationForeignObject, baseStyles.annotationForeignObject, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.annotationForeignObject),
        annotationContentInteractive: (0, _react.mergeClasses)(chartAnnotationLayerClassNames.annotationContentInteractive, baseStyles.annotationContentInteractive, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.annotationContentInteractive),
        annotationForeignObjectInteractive: (0, _react.mergeClasses)(chartAnnotationLayerClassNames.annotationForeignObjectInteractive, baseStyles.annotationForeignObjectInteractive, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.annotationForeignObjectInteractive),
        connectorGroup: (0, _react.mergeClasses)(chartAnnotationLayerClassNames.connectorGroup, baseStyles.connectorGroup, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.connectorGroup)
    };
};
