'use client';
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { HorizontalBarChartVariant } from './index';
import { HighContrastSelector } from '../../utilities/index';
/**
 * @internal
 */ export const hbcClassNames = {
    root: 'fui-hbc__root',
    items: 'fui-hbc__items',
    chart: 'fui-hbc__chart',
    chartTitle: 'fui-hbc__chartTitle',
    barWrapper: 'fui-hbc__barWrapper',
    chartTitleLeft: 'fui-hbc__chartTitleLeft',
    chartTitleRight: 'fui-hbc__chartTitleRight',
    chartDataTextDenominator: 'fui-hbc__textDenom',
    benchmarkContainer: 'fui-hbc__benchmark',
    triangle: 'fui-hbc__triangle',
    barLabel: 'fui-hbc__barLabel',
    chartWrapper: 'fui-hbc__chartWrapper',
    legendContainer: 'fui-hbc__legendContainer'
};
/**
 * Base Styles
 */ const useStyles = makeStyles({
    root: {
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
        textAlign: 'left'
    },
    items10pMargin: {
        marginBottom: tokens.spacingVerticalMNudge
    },
    items16pMargin: {
        marginBottom: tokens.spacingVerticalL
    },
    chart: {
        width: '100%',
        height: '12px',
        display: 'block',
        overflow: 'visible'
    },
    barWrapper: {},
    chartTitle: {
        ...typographyStyles.caption1,
        display: 'flex',
        justifyContent: 'space-between'
    },
    chartTitleLeft: {
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        display: 'block',
        color: tokens.colorNeutralForeground1
    },
    chartTitleLeft4pMargin: {
        marginBottom: '4px'
    },
    chartTitleLeft5pMargin: {
        marginBottom: '5px'
    },
    chartTitleRight: {
        ...typographyStyles.body1Strong,
        color: tokens.colorNeutralForeground1
    },
    chartDataTextDenominator: {
        ...typographyStyles.body1,
        color: tokens.colorNeutralForeground1
    },
    benchmarkContainer: {
        position: 'relative',
        height: '7px',
        marginTop: '-3px',
        marginBottom: '-1px'
    },
    triangle: {
        width: '0',
        height: '0',
        ...shorthands.borderLeft('4px', 'solid', 'transparent'),
        ...shorthands.borderRight('4px', 'solid', 'transparent'),
        ...shorthands.borderTop('7px', 'solid'),
        borderTopColor: tokens.colorPaletteBlueBorderActive,
        marginBottom: tokens.spacingVerticalXS,
        position: 'absolute'
    },
    barLabel: {
        ...typographyStyles.caption1Strong,
        fill: tokens.colorNeutralForeground1,
        [HighContrastSelector]: {
            stroke: 'CanvasText'
        }
    },
    chartWrapper40ppadding: {
        paddingRight: '40p'
    },
    chartWrapper0ppadding: {
        paddingRight: tokens.spacingHorizontalNone
    },
    legendContainer: {
        paddingTop: tokens.spacingVerticalL
    }
});
/**
 * Apply styling to the Carousel slots based on the state
 */ export const useHorizontalBarChartStyles = (props)=>{
    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9, _props_styles10, _props_styles11, _props_styles12;
    const { className, showTriangle, variant, hideLabels } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.
    const baseStyles = useStyles();
    return {
        root: mergeClasses(hbcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
        items: mergeClasses(hbcClassNames.items, showTriangle || variant === HorizontalBarChartVariant.AbsoluteScale ? baseStyles.items16pMargin : baseStyles.items10pMargin, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.items),
        chart: mergeClasses(hbcClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart),
        chartTitle: mergeClasses(hbcClassNames.chartTitle, baseStyles.chartTitle, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartTitle),
        barWrapper: mergeClasses(hbcClassNames.barWrapper, baseStyles.barWrapper, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.barWrapper),
        chartTitleLeft: mergeClasses(hbcClassNames.chartTitleLeft, baseStyles.chartTitleLeft, variant === HorizontalBarChartVariant.AbsoluteScale ? baseStyles.chartTitleLeft4pMargin : baseStyles.chartTitleLeft5pMargin, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.chartTitleLeft),
        chartTitleRight: mergeClasses(hbcClassNames.chartTitleRight, baseStyles.chartTitleRight, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.chartTitleRight),
        chartDataTextDenominator: mergeClasses(hbcClassNames.chartDataTextDenominator, baseStyles.chartDataTextDenominator, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.chartDataTextDenominator),
        benchmarkContainer: mergeClasses(hbcClassNames.benchmarkContainer, baseStyles.benchmarkContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.benchmarkContainer),
        triangle: mergeClasses(hbcClassNames.triangle, baseStyles.triangle, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.triangle),
        barLabel: mergeClasses(hbcClassNames.barLabel, baseStyles.barLabel, (_props_styles10 = props.styles) === null || _props_styles10 === void 0 ? void 0 : _props_styles10.barLabel),
        chartWrapper: mergeClasses(hbcClassNames.chartWrapper, variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? baseStyles.chartWrapper40ppadding : baseStyles.chartWrapper0ppadding, (_props_styles11 = props.styles) === null || _props_styles11 === void 0 ? void 0 : _props_styles11.chartWrapper),
        legendContainer: mergeClasses(hbcClassNames.legendContainer, baseStyles.legendContainer, (_props_styles12 = props.styles) === null || _props_styles12 === void 0 ? void 0 : _props_styles12.legendContainer)
    };
};
