'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, {
    cartesianchartClassNames: function() {
        return cartesianchartClassNames;
    },
    useCartesianChartStyles: function() {
        return useCartesianChartStyles;
    }
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _utilities = require("../../utilities/utilities");
const _index = require("../../utilities/index");
const cartesianchartClassNames = {
    root: 'fui-cart__root',
    chartWrapper: 'fui-cart__chartWrapper',
    axisTitle: 'fui-cart__axisTitle',
    xAxis: 'fui-cart__xAxis',
    yAxis: 'fui-cart__yAxis',
    opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',
    legendContainer: 'fui-cart__legendContainer',
    svgTooltip: 'fui-cart_svgTooltip',
    shapeStyles: 'fui-cart__shapeStyles',
    descriptionMessage: 'fui-cart__descriptionMessage',
    hover: 'fui-cart__hover',
    tooltip: 'fui-cart__tooltip',
    axisAnnotation: 'fui-cart__axisAnnotation',
    chartTitle: 'fui-cart__chartTitle',
    chart: 'fui-cart__chart'
};
/**
 * Base Styles
 */ const useStyles = (0, _react.makeStyles)({
    root: {
        ..._reacttheme.typographyStyles.body1,
        display: 'flex',
        width: '100%',
        height: '100%',
        flexDirection: 'column',
        overflow: 'hidden',
        textAlign: 'left'
    },
    chartWrapper: {
        overflow: 'auto'
    },
    axisTitle: (0, _index.getAxisTitleStyle)(),
    axisAnnotation: (0, _index.getAxisTitleStyle)(),
    xAxis: {
        '& text': {
            fill: _reacttheme.tokens.colorNeutralForeground1,
            ..._reacttheme.typographyStyles.caption2Strong,
            forcedColorAdjust: 'auto'
        },
        '& line': {
            opacity: 0.2,
            stroke: _reacttheme.tokens.colorNeutralForeground1,
            width: '1px',
            forcedColorAdjust: 'auto'
        },
        '& path': {
            display: 'none'
        }
    },
    yAxis: {
        '& text': {
            ..._reacttheme.typographyStyles.caption2Strong,
            fill: _reacttheme.tokens.colorNeutralForeground1,
            forcedColorAdjust: 'auto'
        },
        '& line': {
            opacity: 0.2,
            stroke: _reacttheme.tokens.colorNeutralForeground1,
            forcedColorAdjust: 'auto'
        },
        '& path': {
            display: 'none'
        }
    },
    rtl: {
        '& g': {
            textAnchor: 'end'
        }
    },
    ltr: {},
    opacityChangeOnHover: {
        opacity: '0.1',
        cursor: 'default'
    },
    legendContainer: {
        marginTop: _reacttheme.tokens.spacingVerticalS,
        marginLeft: _reacttheme.tokens.spacingHorizontalXL
    },
    svgTooltip: {
        fill: _reacttheme.tokens.colorNeutralBackground1,
        [_utilities.HighContrastSelector]: {
            fill: 'Canvas'
        }
    },
    tooltip: (0, _index.getTooltipStyle)()
});
const useCartesianChartStyles = (props)=>{
    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;
    const _useRtl = (0, _utilities.useRtl)();
    const baseStyles = useStyles();
    return {
        root: (0, _react.mergeClasses)(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
        chartWrapper: (0, _react.mergeClasses)(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),
        axisTitle: (0, _react.mergeClasses)(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),
        xAxis: (0, _react.mergeClasses)(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),
        yAxis: (0, _react.mergeClasses)(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),
        opacityChangeOnHover: (0, _react.mergeClasses)(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),
        legendContainer: (0, _react.mergeClasses)(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ ),
        svgTooltip: (0, _react.mergeClasses)(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),
        tooltip: (0, _react.mergeClasses)(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),
        axisAnnotation: (0, _react.mergeClasses)(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),
        chart: (0, _react.mergeClasses)(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chart)
    };
};
