'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { HighContrastSelector } from '../../utilities/index';
// Constants needed to create legends using SVG for image export
export const LEGEND_CONTAINER_MARGIN_TOP = 8;
export const LEGEND_CONTAINER_MARGIN_START = 12;
export const LEGEND_PADDING = 8;
export const LEGEND_HEIGHT = 32;
export const LEGEND_SHAPE_BORDER = 1;
const 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.
export const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;
export const LEGEND_SHAPE_MARGIN_END = 8;
export const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;
/**
 * @internal
 */ export const legendClassNames = {
    root: 'fui-legend__root',
    legend: 'fui-legend__legend',
    rect: 'fui-legend__rect',
    shape: 'fui-legend__shape',
    triangle: 'fui-legend__triangle',
    text: 'fui-legend__text',
    hoverChange: 'fui-legend__hoverChange',
    resizableArea: 'fui-legend__resizableArea',
    legendContainer: 'fui-legend__legendContainer',
    annotation: 'fui-legend__annotation'
};
const useStyles = makeStyles({
    root: {
        // FIXME: Removing this style allows the legend container in responsive donut chart to resize
        // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues
        // in responsive charts where legends consist of multiple words.
        whiteSpace: 'nowrap',
        width: '100%',
        alignItems: 'center'
    },
    legend: {
        // setting display to flex does not work
        // display: 'flex',
        alignItems: 'center',
        justifyContent: 'left',
        cursor: 'pointer',
        border: 'none',
        padding: `${LEGEND_PADDING}px`,
        textTransform: 'capitalize',
        // The default min-width is 64px. Setting it to 0 allows the legend container in responsive
        // cartesian charts to resize properly within a flexbox or grid layout.
        minWidth: 0,
        [HighContrastSelector]: {
            color: 'WindowText',
            forcedColorAdjust: 'none'
        },
        '&:hover': {
            [HighContrastSelector]: {
                color: 'HighlightText',
                forcedColorAdjust: 'none'
            }
        }
    },
    rect: {
        [HighContrastSelector]: {
            content: 'var(--rect-content-high-contrast)',
            opacity: 'var(--rect-opacity-high-contrast)'
        },
        width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,
        marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,
        border: `${LEGEND_SHAPE_BORDER}px solid`
    },
    shape: {
        marginRight: `${LEGEND_SHAPE_MARGIN_END}px`
    },
    // TO DO Add props when these styles are used in the component
    triangle: {
        width: '0',
        height: '0',
        borderLeft: '6px solid transparent',
        borderRight: '6px solid transparent',
        borderTop: '10.4px solid',
        marginRight: tokens.spacingHorizontalS
    },
    // TO DO Add props when these styles are used in the component
    text: {
        ...typographyStyles.caption1,
        color: tokens.colorNeutralForeground1,
        forcedColorAdjust: 'auto'
    },
    // TO DO Add props when these styles are used in the component
    hoverChange: {
        width: '12px',
        height: '12px',
        marginRight: tokens.spacingHorizontalS,
        border: '1px solid'
    },
    resizableArea: {
        position: 'relative',
        textAlign: 'left',
        transform: 'translate(-50%, 0)',
        top: 'auto',
        left: '50%',
        minWidth: '200px',
        maxWidth: '800px',
        '::after': {
            padding: '1px 4px 1px',
            borderTop: '-2px',
            borderLeft: '-2px'
        }
    },
    legendContainer: {
        flex: '0 1 auto',
        margin: '4px'
    },
    annotation: {
        display: 'flex',
        alignItems: 'center',
        gap: '4px'
    }
});
export const useLegendStyles = (props)=>{
    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9;
    const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.
    const baseStyles = useStyles();
    return {
        root: mergeClasses(legendClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
        legend: mergeClasses(legendClassNames.legend, baseStyles.legend, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.legend),
        rect: mergeClasses(legendClassNames.rect, baseStyles.rect, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.rect),
        shape: mergeClasses(legendClassNames.shape, baseStyles.shape, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.shape),
        triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.triangle),
        text: mergeClasses(legendClassNames.text, baseStyles.text, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.text),
        hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.hoverChange),
        resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.resizableArea),
        legendContainer: mergeClasses(legendClassNames.legendContainer, baseStyles.legendContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.legendContainer),
        annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.annotation)
    };
};
