import { HighContrastSelector } from '../utilities/utilities';
import { tokens, typographyStyles } from '@fluentui/react-theme';
/**
 * Default padding below chart title (in pixels).
 * Used consistently across all chart types for spacing between title and chart content.
 */
export const CHART_TITLE_PADDING = 20;
export const getTooltipStyle = () => {
  return {
    ...typographyStyles.body1,
    display: 'flex',
    flexDirection: 'column',
    padding: tokens.spacingHorizontalS,
    position: 'absolute',
    textAlign: 'center',
    backgroundColor: tokens.colorNeutralBackground1,
    borderRadius: tokens.borderRadiusSmall,
    pointerEvents: 'none',
    color: tokens.colorNeutralForeground1
  };
};
export const getAxisTitleStyle = () => {
  return {
    ...typographyStyles.caption2Strong,
    fontStyle: 'normal',
    textAlign: 'center',
    color: tokens.colorNeutralForeground2,
    fill: tokens.colorNeutralForeground1,
    [HighContrastSelector]: {
      fill: 'CanvasText'
    }
  };
};
export const getBarLabelStyle = () => {
  return {
    ...typographyStyles.caption1Strong,
    fill: tokens.colorNeutralForeground1,
    forcedColorAdjust: 'auto'
  };
};
export const getMarkerLabelStyle = () => {
  return {
    ...typographyStyles.body1,
    fill: tokens.colorNeutralForeground1,
    textAnchor: 'middle',
    [HighContrastSelector]: {
      fill: 'CanvasText'
    }
  };
};
export const getChartTitleStyles = () => {
  return {
    ...typographyStyles.caption2Strong,
    fill: tokens.colorNeutralForeground1,
    forcedColorAdjust: 'auto',
    textAlign: 'center',
    marginBottom: tokens.spacingVerticalS
  };
};
/**
 * Creates dynamic chart title styles using CSS properties.
 * @param titleFont - Optional font configuration from Plotly layout
 * @param xanchor - Optional horizontal anchor/alignment ('auto' | 'left' | 'center' | 'right')
 * @param yanchor - Optional vertical anchor/alignment ('auto' | 'top' | 'middle' | 'bottom')
 * @param pad - Optional padding configuration
 * @returns Style object with CSS properties for dynamic styling
 */
export function getChartTitleInlineStyles(titleFont, xanchor, yanchor, pad) {
  const styles = {};
  if (titleFont) {
    Object.assign(styles, titleFont.family && {
      fontFamily: titleFont.family
    }, titleFont.size && {
      fontSize: `${titleFont.size}px`
    }, titleFont.weight && {
      fontWeight: titleFont.weight
    }, titleFont.color && {
      fill: titleFont.color
    }, titleFont.shadow && titleFont.shadow !== 'none' && {
      filter: `drop-shadow(${titleFont.shadow})`
    });
  }
  if (xanchor) {
    const anchorMap = {
      left: 'left',
      center: 'center',
      right: 'right'
    };
    const alignmentKey = xanchor.toLowerCase();
    if (anchorMap[alignmentKey]) {
      styles.textAlign = anchorMap[alignmentKey];
    }
  }
  if (yanchor) {
    const anchorMap = {
      top: 'flex-start',
      middle: 'center',
      bottom: 'flex-end'
    };
    const alignmentKey = yanchor.toLowerCase();
    if (anchorMap[alignmentKey]) {
      styles.alignSelf = anchorMap[alignmentKey];
    }
  }
  if (pad) {
    var _pad_t;
    const t = (_pad_t = pad.t) !== null && _pad_t !== void 0 ? _pad_t : 0;
    var _pad_r;
    const r = (_pad_r = pad.r) !== null && _pad_r !== void 0 ? _pad_r : 0;
    var _pad_b;
    const b = (_pad_b = pad.b) !== null && _pad_b !== void 0 ? _pad_b : 0;
    var _pad_l;
    const l = (_pad_l = pad.l) !== null && _pad_l !== void 0 ? _pad_l : 0;
    styles.padding = `${t}px ${r}px ${b}px ${l}px`;
  }
  return styles;
}