'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
/**
 * @internal
 */ export const polarChartClassNames = {
    root: 'fui-polar__root',
    chartWrapper: 'fui-polar__chartWrapper',
    chart: 'fui-polar__chart',
    gridLineInner: 'fui-polar__gridLineInner',
    gridLineOuter: 'fui-polar__gridLineOuter',
    tickLabel: 'fui-polar__tickLabel',
    legendContainer: 'fui-polar__legendContainer'
};
const useStyles = makeStyles({
    root: {
        ...typographyStyles.body1,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        width: '100%',
        height: '100%',
        textAlign: 'left'
    },
    chart: {
        display: 'block'
    },
    gridLine: {
        fill: 'none',
        stroke: tokens.colorNeutralForeground1,
        strokeWidth: '1px'
    },
    gridLineInner: {
        opacity: 0.2
    },
    gridLineOuter: {
        opacity: 1
    },
    tickLabel: {
        ...typographyStyles.caption2Strong,
        fill: tokens.colorNeutralForeground1
    },
    legendContainer: {
        width: '100%'
    }
});
/**
 * Apply styling to the PolarChart component
 */ export const usePolarChartStyles = (props)=>{
    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6;
    const baseStyles = useStyles();
    return {
        root: mergeClasses(polarChartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
        chartWrapper: mergeClasses(polarChartClassNames.chartWrapper, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),
        chart: mergeClasses(polarChartClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart),
        gridLineInner: mergeClasses(polarChartClassNames.gridLineInner, baseStyles.gridLine, baseStyles.gridLineInner, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.gridLineInner),
        gridLineOuter: mergeClasses(polarChartClassNames.gridLineOuter, baseStyles.gridLine, baseStyles.gridLineOuter, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.gridLineOuter),
        tickLabel: mergeClasses(polarChartClassNames.tickLabel, baseStyles.tickLabel, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.tickLabel),
        legendContainer: mergeClasses(polarChartClassNames.legendContainer, baseStyles.legendContainer, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.legendContainer)
    };
};
