import { pie, arc } from 'd3';
import type { Arc, PieArcDatum, DefaultArcObject } from 'd3';

export type LabeledData = LabeledDatum[]

type ArcSlice = DefaultArcObject & PieArcDatum<LabeledDatum>;

@customElement('donut-chart')
export class DonutChart extends LitElement {
  @property({ attribute: false }) arcRatio = 0.8;

  @property({ attribute: false }) data: LabeledData[] = [];

  width = 100;

  get height(): number {
    return (this.width * (4 / 5));
  }

  get arcScale(): number {
    return 0.9;
  }

  constructor() {
    super();
    this.updateScalingFactor(this.getBoundingClientRect().width);
  }

  get radius(): number {
    return Math.min(this.width, this.height) / 2;
  }

  render(): TemplateResult {
    const { height, width } = this;
    const { arcRatio, arcScale, radius, scalingFactor } = this;

    const slices = pie<LabeledDatum>()
      .value(d => d.value)
      .sort(null)
      .sortValues(null)(this.data);

    const donutArc = arc()
      .innerRadius(radius * arcScale)
      .outerRadius(radius * arcScale * arcRatio);

    const xOffset = width / 2;
    const yOffset = height / 2;

    return svg`
      <svg id="pie" part="pie" viewBox="-${xOffset} -${yOffset} ${width} ${height}">
        ${slices.map((d: ArcSlice, i: number) => svg`
          <path data-slice="${d.data.key}"
                data-index="${i}"
                part="slice ${d.data.key}"
                vector-effect="non-scaling-stroke"
                d="${donutArc(d)}"
                title="${d.data.label ?? d.data.key} - ${d.data.value}"
          ></path>
        `)}
      </svg>
    `;
  }

  updated(changed: PropertyValues<this>): void {
    if (changed.has('width'))
      this.updateScalingFactor(this.getBoundingClientRect().width);
  }

  updateScalingFactor(width: number): void {
    this.scalingFactor = 2 * this.width / (width === 0 ? this.width : width);
  }
}