export enum ChartAttributeBits {
  Stack = 1 << 30,
  PercentStack = 1 << 29 | ChartAttributeBits.Stack,
  Horizontal = 1 << 28,
}
 
export enum ChartTypeBits {
  None = 0,
  Line = 1 << 1,
  Column = 1 << 2,
  ColumnStacked = ChartTypeBits.Column | ChartAttributeBits.Stack,
  ColumnPercentStacked = ChartTypeBits.Column | ChartAttributeBits.PercentStack,
  Bar = 1 << 2 | ChartAttributeBits.Horizontal,
  BarStacked = ChartTypeBits.Bar | ChartAttributeBits.Stack,
  BarPercentStacked = ChartTypeBits.Bar | ChartAttributeBits.PercentStack,
  Pie = 1 << 3,
  Doughnut = 1 << 8 | ChartTypeBits.Pie,
  Area = 1 << 4,
  AreaStacked = ChartTypeBits.Area | ChartAttributeBits.Stack,
  AreaPercentStacked = ChartTypeBits.Area | ChartAttributeBits.PercentStack,
  Radar = 1 << 5,
  Scatter = 1 << 6,
  Combination = 1 << 7,
}

export interface IChartBuildOptions {
  /**
   * @property {string} [title] The title of the chart.
   */
  title?: {
    /**
     * @property {string} [titlePosition] The position of the chart title.
     */
    position?: TitlePositionEnum;
  } & IChartTextStyle;
  /**
   * @property {string} [legend] The legend of the chart.
   */
  legend?: {
    /**
     * @property {string} [legendPosition] The position of the legend.The possible values are 'top', 'bottom', 'left', 'right' & 'hide'.
     */
    position?: LegendPositionEnum;
    /**
     * @property {number} [fontSize] The font size of the legend.
     */
    fontSize?: number;
    /**
     * @property {string} [color] The font color of the legend.
     */
    color?: string;
    /**
     * @property {string} [bold] The font style of the legend.
     */
    bold?: boolean;
    /**
     * @property {string} [italic] The font weight of the legend.
     */
    italic?: boolean;
    /**
     * @property {SelectModeEnum} [selectMode] The select mode of the legend.The possible values are 'single', 'multiple' & 'close'.
     */
    selectMode?: SelectModeEnum;
  };
  /**
   * @property {string} [xAxisTitle] The x-axis title of the chart.
   * @example
   * ```ts
   * chartBuilder.setOptions('xAxisTitle.content', 'xAxis Title text')
   * .setOptions('xAxisTitle.font', 1)
   * .setOptions('xAxisTitle.fontSize', 12)
   * .setOptions('xAxisTitle.fontColor', '#ff0000')
   * .build();
   * ```
   */
  xAxisTitle?: IChartTextStyle;
  /**
   * @property {string} [rightYAxisTitle] The right y-axis title of the chart.
   */
  yAxisTitle?: IChartTextStyle;
  /**
   * @property {string} [rightYAxisTitle] The right y-axis title of the chart.
   */
  rightYAxisTitle?: IChartTextStyle;
  xAxis?: IAxisOptions;
  yAxis?: IAxisOptions;
  yRightAxis?: IAxisOptions;
  axisPointer?: {
    /**
     * @property {string} [indicatorLineType] The line type of the axis pointer.
     */
    indicatorLineType?: string;
    /**
     * @property {ChartBorderDashType} [indicatorLineColor] The line color of the axis pointer.The maybe values are 'solid', 'dotted', 'dashed'.
     */
    indicatorLineColor?: ChartBorderDashType;
    /**
     * @property {string} [indicatorLabelColor] The line width of the axis pointer.
     */
    indicatorLabelColor?: string;
    /**
     * @property {string} [indicatorLabelTextColor] The font color of the axis pointer.
     */
    indicatorLabelTextColor?: string;
  };
  allSeriesStyle?: IAllSeriesStyle;
  seriesStyleMap?: {
    [id: string]: ISeriesStyle;
  };
  /**
   * @property {string} [area] The area of line/area chart.
   */
  area?: {
    lineStyle: AreaLineStyle;
  };
  /**
   * @property {string} [backgroundColor] The background color of the chart.
   */
  backgroundColor?: string;
  /**
   * @property {string} [borderColor] The border color of the chart.
   */
  borderColor?: string;
  /**
   * @property {boolean} [gradientFill] Whether to use gradient fill.This property does not work in line charts.
   */
  gradientFill?: boolean;
  /**
   * @property {string} [theme] The theme of the chart.
   */
  theme?: string;
  /**
   * @property {InvalidValueType} [invalidValueType] The display mode for empty cells.
   */
  invalidValueType?: InvalidValueType;
}

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
// Create a builder for a line chart
const chartBuilder = fSheet.newChart().asLineChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  // Set position
  .setPosition(1, 1, 0, 0) 
  // Set axis pointer
  .setAxisPointerStyle({
    indicatorLabelColor: '#ff0000',
    indicatorLineType: 'solid', // ChartBorderDashType.Solid
    indicatorLineColor: '#00ff00',
    indicatorLabelTextColor: '#0000ff',
  })
  // Set data point size
  .setDataPointSize(8)
  // Set data point shape
  .setDataPointShape('triangle')
  // Trigger build
  .build();
// Pass the build result to create the chart
const fChart = await fSheet.insertChart(chartInfo);
// Wait for the insert to complete and render
setTimeout(() => {
  if (fChart) {
    const chartBuilder = fSheet.newChart(fChart);
    // Get the series data
    const first = fChart.getSeriesData()[0];
    // Set the color of the first series to red
    chartBuilder.setSeriesStyle(first.index, {
      color: '#ff0000',
    }).build();
    // Update info to chart
    fSheet.updateChart(chartBuilder);
  }
}, 1000);