import * as d3 from 'd3';
import { LinkStyle } from '../../styles/LinkStyle';
import { LinkRenderer } from './LinkRenderer';

const PI6 = Math.PI / 6;

class NaturalCurveRenderer extends LinkRenderer {

    _arrowheadSize: number;

    constructor (style?: LinkStyle) {

        super(style);

        this._arrowheadSize = 10;

    }

    render (context: CanvasRenderingContext2D,
            x: d3.ScaleLinear<number, number>,
            y: d3.ScaleLinear<number, number>): void {


        const arrowx: number[] = [];
        const arrowy: number[] = [];

        context.save();
        context.beginPath();

        this._links.forEach(link => {

            const path = link.path;

            if (path) {

                path.apply(context, x, y);

                const angle = path.angleAlong(1, x, y) + Math.PI;
                const arrow = path.pointAlong(1, x, y);
                this._arrow(arrow.x, arrow.y, angle, arrowx, arrowy);

            }


        });

        this._doStroke(context);

        context.beginPath();
        const n = arrowx.length;
        for (let i=0; i<n; i += 3) {
            context.moveTo(arrowx[i], arrowy[i]);
            context.lineTo(arrowx[i+1], arrowy[i+1]);
            context.lineTo(arrowx[i+2], arrowy[i+2]);
            context.closePath();
        }
        this._doStroke(context);
        this._doFill(context);

        context.restore();

    }

    private _arrow (x: number, y: number, ng: number, xs: number[], ys: number[]): void {

        const sz = this._arrowheadSize;
        xs.push(x - sz * Math.sin(ng - PI6));
        ys.push(y - sz * Math.cos(ng - PI6));
        xs.push(x);
        ys.push(y);
        xs.push(x - sz * Math.sin(ng + PI6));
        ys.push(y - sz * Math.cos(ng + PI6));

    }

}


export {
    NaturalCurveRenderer
}