"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = exports.INACTIVE_LEGEND_TEXT_OPACITY = exports.LEGEND_SHAPE_MARGIN_END = exports.LEGEND_SHAPE_SIZE = exports.LEGEND_SHAPE_BORDER = exports.LEGEND_HEIGHT = exports.LEGEND_PADDING = exports.LEGEND_CONTAINER_MARGIN_START = exports.LEGEND_CONTAINER_MARGIN_TOP = void 0;
var tslib_1 = require("tslib");
var Styling_1 = require("@fluentui/react/lib/Styling");
// Constants needed to create legends using SVG for image export
exports.LEGEND_CONTAINER_MARGIN_TOP = 8;
exports.LEGEND_CONTAINER_MARGIN_START = 12;
exports.LEGEND_PADDING = 8;
exports.LEGEND_HEIGHT = 32;
exports.LEGEND_SHAPE_BORDER = 1;
var LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;
// SVG strokes are drawn centered around the path, with half of the stroke width extending inward
// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,
// expand the shape accordingly.
exports.LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + exports.LEGEND_SHAPE_BORDER;
exports.LEGEND_SHAPE_MARGIN_END = 8;
exports.INACTIVE_LEGEND_TEXT_OPACITY = 0.67;
var getStyles = function (props) {
    var _a, _b;
    var className = props.className, theme = props.theme, _c = props.isLineLegendInBarChart, isLineLegendInBarChart = _c === void 0 ? false : _c;
    var _d = theme, palette = _d.palette, fonts = _d.fonts;
    var options = {
        inset: undefined,
        position: undefined,
        highContrastStyle: {
            outlineColor: theme.semanticColors.focusBorder,
        },
        borderColor: 'transparent',
        outlineColor: undefined,
    };
    return {
        root: [
            {
                whiteSpace: 'nowrap',
                width: '100%',
                alignItems: 'center',
                margin: '-8px 0 0 -8px',
            },
            className,
        ],
        legend: [
            (0, Styling_1.getFocusStyle)(theme, options),
            {
                display: 'flex',
                alignItems: 'center',
                cursor: 'pointer',
                border: 'none',
                padding: "".concat(exports.LEGEND_PADDING, "px"),
                background: 'none',
                textTransform: 'capitalize',
            },
        ],
        rect: {
            selectors: (_a = {},
                _a[Styling_1.HighContrastSelector] = {
                    content: "linear-gradient(to right, ".concat(props.colorOnSelectedState, ", ").concat(props.colorOnSelectedState, ")"),
                    opacity: props.colorOnSelectedState === theme.semanticColors.buttonBackground ? '0.6' : '',
                },
                _a),
            width: "".concat(LEGEND_SHAPE_SIZE_WITHOUT_BORDER, "px"),
            height: isLineLegendInBarChart ? '4px' : "".concat(LEGEND_SHAPE_SIZE_WITHOUT_BORDER, "px"),
            backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,
            marginRight: "".concat(exports.LEGEND_SHAPE_MARGIN_END, "px"),
            border: "".concat(exports.LEGEND_SHAPE_BORDER, "px solid"),
            borderColor: props.borderColor ? props.borderColor : theme === null || theme === void 0 ? void 0 : theme.semanticColors.buttonBorder,
            content: props.stripePattern
                ? // eslint-disable-next-line @fluentui/max-len
                    "repeating-linear-gradient(135deg, transparent, transparent 3px, ".concat(props.colorOnSelectedState, " 1px, ").concat(props.colorOnSelectedState, " 4px)")
                : '',
        },
        shape: [
            {
                marginRight: "".concat(exports.LEGEND_SHAPE_MARGIN_END, "px"),
            },
        ],
        triangle: {
            width: '0',
            height: '0',
            borderLeft: '6px solid transparent',
            borderRight: '6px solid transparent',
            borderTop: '10.4px solid',
            borderTopColor: props.colorOnSelectedState,
            marginRight: '8px',
            opacity: props.colorOnSelectedState === theme.semanticColors.buttonBackground
                ? '0.6'
                : props.opacity
                    ? props.opacity
                    : '',
            selectors: (_b = {},
                _b[Styling_1.HighContrastSelector] = {
                    border: '0px',
                    height: '10.4px',
                    width: '10.4px',
                    clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
                    backgroundImage: "linear-gradient(to right, ".concat(props.colorOnSelectedState, ", ").concat(props.colorOnSelectedState, ")"),
                },
                _b),
        },
        text: tslib_1.__assign(tslib_1.__assign({}, fonts.small), { lineHeight: '16px', color: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText, opacity: props.colorOnSelectedState === theme.semanticColors.buttonBackground ? "".concat(exports.INACTIVE_LEGEND_TEXT_OPACITY) : '' }),
        hoverChange: {
            width: '12px',
            height: '12px',
            backgroundColor: theme.semanticColors.buttonBackground,
            marginRight: '8px',
            border: '1px solid',
            borderColor: props.borderColor ? props.borderColor : palette.black,
        },
        overflowIndicationTextStyle: [
            (0, Styling_1.getFocusStyle)(theme, options),
            tslib_1.__assign(tslib_1.__assign({ cursor: 'pointer', color: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText }, fonts.small), { lineHeight: '16px', padding: "".concat(exports.LEGEND_PADDING, "px") }),
        ],
        hoverCardRoot: {
            padding: '8px',
        },
        subComponentStyles: {
            hoverCardStyles: {
                host: [(0, Styling_1.getFocusStyle)(theme, options)],
            },
        },
    };
};
exports.getStyles = getStyles;
//# sourceMappingURL=Legends.styles.js.map