'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { getAxisTitleStyle } from '../../utilities/index';
/**
 * @internal
 */ export const donutClassNames = {
    root: 'fui-donut__root',
    chart: 'fui-donut__chart',
    legendContainer: 'fui-donut__legendContainer',
    chartWrapper: 'fui-donut__chartWrapper',
    axisAnnotation: 'fui-donut__axisAnnotation'
};
/**
 * Base Styles
 */ const useStyles = makeStyles({
    root: {
        // alignItems: 'center',
        ...typographyStyles.body1,
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
        height: '100%',
        textAlign: 'left'
    },
    chart: {
        boxSizing: 'content-box',
        alignmentAdjust: 'center',
        display: 'block',
        overflow: 'visible'
    },
    legendContainer: {
        paddingTop: tokens.spacingVerticalL,
        width: '100%'
    },
    axisAnnotation: getAxisTitleStyle()
});
/**
 * Apply styling to the DonutChart component
 */ export const useDonutChartStyles = (props)=>{
    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4;
    const { className } = props;
    const baseStyles = useStyles();
    return {
        root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
        chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
        legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),
        chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),
        axisAnnotation: mergeClasses(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation)
    };
};
