'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { HighContrastSelector, getTooltipStyle, getChartTitleStyles } from '../../utilities/index';
export const sankeyChartClassNames = {
    root: 'fui-sc__root',
    nodes: 'fui-sc__nodes',
    links: 'fui-sc__links',
    nodeTextContainer: 'fui-sc__nodeTextContainer',
    toolTip: 'fui-sc__toolTip',
    chartWrapper: 'fui-sc__chartWrapper',
    chart: 'fui-sc__chart',
    chartTitle: 'fui-sc__chartTitle',
    svgTooltip: 'fui-sc__svgTooltip'
};
const useStyles = makeStyles({
    root: {
        ...typographyStyles.body1,
        display: 'flex',
        width: '100%',
        height: '100%',
        flexDirection: 'column',
        overflow: 'hidden',
        textAlign: 'left'
    },
    links: {
        fill: tokens.colorNeutralBackground1,
        strokeWidth: '3px',
        [HighContrastSelector]: {
            fill: 'Canvas'
        }
    },
    nodes: {
        fill: '#F5F5F5',
        [HighContrastSelector]: {
            fill: 'Canvas'
        }
    },
    toolTip: getTooltipStyle(),
    nodeTextContainer: {
        '& text': {
            [HighContrastSelector]: {
                fill: 'CanvasText'
            }
        },
        marginTop: '4px',
        marginLeft: '8px',
        marginBottom: '4px',
        marginRight: '8px'
    },
    chartWrapper: {
        overflow: 'auto'
    },
    chart: {
        display: 'block'
    },
    chartTitle: getChartTitleStyles(),
    svgTooltip: {
        fill: tokens.colorNeutralBackground1,
        [HighContrastSelector]: {
            fill: 'Canvas'
        }
    }
});
export const useSankeyChartStyles = (props)=>{
    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3, _props_styles4;
    const baseStyles = useStyles();
    return {
        root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
        nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/ ),
        links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/ ),
        nodeTextContainer: mergeClasses(sankeyChartClassNames.nodeTextContainer, baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/ ),
        toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/ ),
        chartWrapper: mergeClasses(sankeyChartClassNames.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),
        chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart),
        chartTitle: mergeClasses(sankeyChartClassNames.chartTitle, baseStyles.chartTitle, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartTitle),
        svgTooltip: mergeClasses(sankeyChartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.svgTooltip)
    };
};
