'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { HighContrastSelector, useRtl } from '../../utilities/utilities';
import { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';
/**
 * @internal
 */ export 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 = makeStyles({
    root: {
        ...typographyStyles.body1,
        display: 'flex',
        width: '100%',
        height: '100%',
        flexDirection: 'column',
        overflow: 'hidden',
        textAlign: 'left'
    },
    chartWrapper: {
        overflow: 'auto'
    },
    axisTitle: getAxisTitleStyle(),
    axisAnnotation: getAxisTitleStyle(),
    xAxis: {
        '& text': {
            fill: tokens.colorNeutralForeground1,
            ...typographyStyles.caption2Strong,
            forcedColorAdjust: 'auto'
        },
        '& line': {
            opacity: 0.2,
            stroke: tokens.colorNeutralForeground1,
            width: '1px',
            forcedColorAdjust: 'auto'
        },
        '& path': {
            display: 'none'
        }
    },
    yAxis: {
        '& text': {
            ...typographyStyles.caption2Strong,
            fill: tokens.colorNeutralForeground1,
            forcedColorAdjust: 'auto'
        },
        '& line': {
            opacity: 0.2,
            stroke: tokens.colorNeutralForeground1,
            forcedColorAdjust: 'auto'
        },
        '& path': {
            display: 'none'
        }
    },
    rtl: {
        '& g': {
            textAnchor: 'end'
        }
    },
    ltr: {},
    opacityChangeOnHover: {
        opacity: '0.1',
        cursor: 'default'
    },
    legendContainer: {
        marginTop: tokens.spacingVerticalS,
        marginLeft: tokens.spacingHorizontalXL
    },
    svgTooltip: {
        fill: tokens.colorNeutralBackground1,
        [HighContrastSelector]: {
            fill: 'Canvas'
        }
    },
    tooltip: getTooltipStyle()
});
/**
 *
 * Apply styling to the Carousel slots based on the state
 */ export const useCartesianChartStyles = (props)=>{
    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;
    const _useRtl = useRtl();
    const baseStyles = useStyles();
    return {
        root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
        chartWrapper: 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: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),
        xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),
        yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),
        opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),
        legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ ),
        svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),
        tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),
        axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),
        chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chart)
    };
};
