import Shape from './shape';
import { SectorOptions } from '../models/painter';

class Sector extends Shape {
  draw(): void {
    let { x = 0, y = 0 } = this.config as SectorOptions;
    const {
      r0 = 0, // 内半径
      r1 = 0, // 外半径
      startAngle = 0,
      endAngle = Math.PI * 2,
      interval = 0, // 扇区半径两侧间隔尺寸
      anticlockwise = false,
      fillStyle = 'rgba(255, 255, 255, 0)',
      strokeStyle = '#fff',
    } = this.config as SectorOptions;

    this.ctx.beginPath();

    // TODO: 为了扇区间隔均匀，需要大扇区降低圆心偏移，小扇区增加圆心偏移
    const angleDiff = endAngle - startAngle;
    const offsetAngle = startAngle + angleDiff / 2;
    x = x + Math.cos(offsetAngle) * interval;
    y = y + Math.sin(offsetAngle) * interval;

    this.ctx.moveTo(
      x + Math.cos(startAngle) * r0,
      y + Math.sin(startAngle) * r0,
    );
    this.ctx.lineTo(
      x + Math.cos(startAngle) * r1,
      y + Math.sin(startAngle) * r1,
    );

    // 画外弧
    this.ctx.arc(x, y, r1, startAngle, endAngle, anticlockwise);

    this.ctx.lineTo(x + Math.cos(endAngle) * r0, y + Math.sin(endAngle) * r0);

    // 画内弧
    this.ctx.arc(x, y, r0, endAngle, startAngle, !anticlockwise);

    this.ctx.lineWidth = 1;
    this.ctx.fillStyle = fillStyle;
    this.ctx.strokeStyle = strokeStyle;
    this.ctx.stroke();
    this.ctx.fill();

    this.ctx.closePath();
  }
}

export default Sector;