'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: all[name]
    });
}
_export(exports, {
    hbcClassNames: function() {
        return hbcClassNames;
    },
    useHorizontalBarChartStyles: function() {
        return useHorizontalBarChartStyles;
    }
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _index = require("./index");
const _index1 = require("../../utilities/index");
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 = (0, _react.makeStyles)({
    root: {
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
        textAlign: 'left'
    },
    items10pMargin: {
        marginBottom: _reacttheme.tokens.spacingVerticalMNudge
    },
    items16pMargin: {
        marginBottom: _reacttheme.tokens.spacingVerticalL
    },
    chart: {
        width: '100%',
        height: '12px',
        display: 'block',
        overflow: 'visible'
    },
    barWrapper: {},
    chartTitle: {
        ..._reacttheme.typographyStyles.caption1,
        display: 'flex',
        justifyContent: 'space-between'
    },
    chartTitleLeft: {
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        display: 'block',
        color: _reacttheme.tokens.colorNeutralForeground1
    },
    chartTitleLeft4pMargin: {
        marginBottom: '4px'
    },
    chartTitleLeft5pMargin: {
        marginBottom: '5px'
    },
    chartTitleRight: {
        ..._reacttheme.typographyStyles.body1Strong,
        color: _reacttheme.tokens.colorNeutralForeground1
    },
    chartDataTextDenominator: {
        ..._reacttheme.typographyStyles.body1,
        color: _reacttheme.tokens.colorNeutralForeground1
    },
    benchmarkContainer: {
        position: 'relative',
        height: '7px',
        marginTop: '-3px',
        marginBottom: '-1px'
    },
    triangle: {
        width: '0',
        height: '0',
        borderLeft: `4px solid transparent`,
        borderRight: `4px solid transparent`,
        borderTop: `7px solid`,
        borderTopColor: _reacttheme.tokens.colorPaletteBlueBorderActive,
        marginBottom: _reacttheme.tokens.spacingVerticalXS,
        position: 'absolute'
    },
    barLabel: {
        ..._reacttheme.typographyStyles.caption1Strong,
        fill: _reacttheme.tokens.colorNeutralForeground1,
        [_index1.HighContrastSelector]: {
            stroke: 'CanvasText'
        }
    },
    chartWrapper40ppadding: {
        paddingRight: '40p'
    },
    chartWrapper0ppadding: {
        paddingRight: _reacttheme.tokens.spacingHorizontalNone
    },
    legendContainer: {
        paddingTop: _reacttheme.tokens.spacingVerticalL
    }
});
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: (0, _react.mergeClasses)(hbcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
        items: (0, _react.mergeClasses)(hbcClassNames.items, showTriangle || variant === _index.HorizontalBarChartVariant.AbsoluteScale ? baseStyles.items16pMargin : baseStyles.items10pMargin, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.items),
        chart: (0, _react.mergeClasses)(hbcClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart),
        chartTitle: (0, _react.mergeClasses)(hbcClassNames.chartTitle, baseStyles.chartTitle, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartTitle),
        barWrapper: (0, _react.mergeClasses)(hbcClassNames.barWrapper, baseStyles.barWrapper, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.barWrapper),
        chartTitleLeft: (0, _react.mergeClasses)(hbcClassNames.chartTitleLeft, baseStyles.chartTitleLeft, variant === _index.HorizontalBarChartVariant.AbsoluteScale ? baseStyles.chartTitleLeft4pMargin : baseStyles.chartTitleLeft5pMargin, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.chartTitleLeft),
        chartTitleRight: (0, _react.mergeClasses)(hbcClassNames.chartTitleRight, baseStyles.chartTitleRight, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.chartTitleRight),
        chartDataTextDenominator: (0, _react.mergeClasses)(hbcClassNames.chartDataTextDenominator, baseStyles.chartDataTextDenominator, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.chartDataTextDenominator),
        benchmarkContainer: (0, _react.mergeClasses)(hbcClassNames.benchmarkContainer, baseStyles.benchmarkContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.benchmarkContainer),
        triangle: (0, _react.mergeClasses)(hbcClassNames.triangle, baseStyles.triangle, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.triangle),
        barLabel: (0, _react.mergeClasses)(hbcClassNames.barLabel, baseStyles.barLabel, (_props_styles10 = props.styles) === null || _props_styles10 === void 0 ? void 0 : _props_styles10.barLabel),
        chartWrapper: (0, _react.mergeClasses)(hbcClassNames.chartWrapper, variant === _index.HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? baseStyles.chartWrapper40ppadding : baseStyles.chartWrapper0ppadding, (_props_styles11 = props.styles) === null || _props_styles11 === void 0 ? void 0 : _props_styles11.chartWrapper),
        legendContainer: (0, _react.mergeClasses)(hbcClassNames.legendContainer, baseStyles.legendContainer, (_props_styles12 = props.styles) === null || _props_styles12 === void 0 ? void 0 : _props_styles12.legendContainer)
    };
};
