import { BackgroundColorsMappingLight } from '../../../constants/tokens/colors-mapping';
import { Typography } from '../../../constants/tokens/typography';
const CHART_DEFAULT_COLORS = [
  'bg-accent1-primary',
  'bg-accent2-primary',
  'bg-accent3-primary',
  'bg-accent4-primary',
  'bg-accent5-primary',
  'bg-accent6-primary',
  'bg-accent7-primary',
  'bg-accent8-primary',
  'bg-accent9-primary',
  'bg-accent10-primary',
];
const DEFAULT_FONT_FAMILY = 'font-family:"Inter", sans-serif;';
const FONTSTYLEMAPPING = Object.keys(Typography).reduce((result, key) => {
  result[key] =
    DEFAULT_FONT_FAMILY +
      Typography[key].filter((str) => str.indexOf('@apply') < 0).join(';');
  return result;
}, { 'v-text-secondary': `color:rgba(107, 116, 125, 1);` });
/**
 * base drawer that provides a common structure for drawing charts using a renderer and options.
 */
export class BaseDrawer {
  /**
   * This is a constructor function that takes in a renderer and options for a chart drawer.
   *
   * @param {BaseRenderer<SVGElement | HTMLCanvasElement>} renderer - `renderer` parameter is an instance of a `BaseRenderer` class that can render either SVG elements or a 2D canvas context
   * @param {BaseInteractor<SVGElement | HTMLCanvasElement>} interactor - `renderer` parameter is an instance of a `BaseInteractor` class
   * @param {ChartDrawerOptions<unknown>} options - where `T` is a generic type parameter. This parameter contains various options that can be used to customize the chart being drawn
   */
  constructor(renderer, interactor, options) {
    this.renderer = renderer;
    this.interactor = interactor;
    this.options = options;
  }
  /**
   * The function executes a draw method.
   */
  execute() {
    const drawPiece = this.draw();
    this.drawPiece = drawPiece;
    this.addInteractionSupport(drawPiece);
  }
  /**
   * returns a color token based on an index and an optional array of colors.
   *
   * @param {number} index - The index parameter is a number that represents the index of the color to be returned from the colors array.
   * @param {BackgroundColorsTokenType[]} [colors] - `colors` is an optional parameter of type `BackgroundColorsTokenType[]`
   * @returns {BackgroundColorsTokenType} color token
   */
  getColorByIndex(index, colors) {
    colors = colors && colors.length ? colors : CHART_DEFAULT_COLORS;
    index = index % colors.length;
    return colors[index];
  }
  /**
   * This function takes a token representing a background color and returns the corresponding color value from a predefined mapping.
   *
   * @param {BackgroundColorsTokenType} token - a string representing the token for a background color
   * @returns {string} The string value returned is the color code
   */
  getColorFromToken(token) {
    return BackgroundColorsMappingLight[token];
  }
  /**
   * The function takes a token as input and returns the corresponding CSS style text from a predefined mapping.
   *
   * @param {string} token - The `token` parameter is a string that represents a specific style mapping
   * in the `FONTSTYLEMAPPING` object. The function returns the CSS style text associated with the given `token`.
   * @returns {string} a string that represents the CSS style associated with the input token. If the input token
   * matches a key in the `FONTSTYLEMAPPING` object, the corresponding CSS style string is returned.
   */
  getStyleTextFromToken(token) {
    return token
      .split(' ')
      .map((item) => FONTSTYLEMAPPING[item])
      .join(';');
  }
}
