import {Behavior, ColorEditor, Visible} from "@webbpm/base-package";
import {ChartPlugin} from "./ChartPlugin";
import {Chart, ChartMeta} from "chart.js";
import {ArcDatasetBackgroundConfig} from "./model/ArcDatasetBackgroundConfig";
import {ChartUtils} from "../ChartUtils";

export class ArcBackgroundChartPlugin extends Behavior implements ChartPlugin {
  @Visible('false')
  id: string = 'arcDatasetBackground';

  public backgroundRadiusPercent: number = 100;
  @ColorEditor()
  public backgroundColor: string = '#FFFFFF1B';
  public datasetBackgroundConfig: ArcDatasetBackgroundConfig[];

  beforeDatasetsDraw(chart: Chart): void {
    if (ChartUtils.isEmpty(chart)) {
      return;
    }

    let ctx = chart.ctx;
    let radius = Math.min(chart.height, chart.width) / 2;
    // Дуги рисуются чуть ниже, чем в центре, поэтому, чтобы при 100% круги не обрезались, умножаем на 0.97
    radius *= (this.backgroundRadiusPercent / 100 * 0.97);
    let centerX = chart.getDatasetMeta(0).data[0].x;
    let centerY = chart.getDatasetMeta(0).data[0].y;

    ctx.fillStyle = this.backgroundColor;
    ctx.save();
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  }

  public beforeDatasetDraw(chart: Chart, args: { index: number; meta: ChartMeta }) {
    if (!this.datasetBackgroundConfig || !this.datasetBackgroundConfig[args.index] || !args.meta.data[0]) {
      return;
    }

    let ctx = chart.ctx;
    let config = this.datasetBackgroundConfig[args.index];
    let arc = args.meta.data[0] as any;

    ctx.fillStyle = config.color;
    ctx.save();
    ctx.beginPath();
    ctx.arc(arc.x, arc.y, arc.outerRadius * (100 + config.outerBorderPercent) / 100, 0, Math.PI * 2, false);
    ctx.arc(arc.x, arc.y, arc.innerRadius * (100 - config.innerBorderPercent) / 100, 0, Math.PI * 2, true);
    ctx.fill();
    ctx.restore();
  }

}