import { registerNode, Util } from '@antv/g6';


export default registerNode('clen-queue-pointer', {
    draw(cfg, group) {
        let id = cfg.id as string;

        const index = parseInt(id.split('-')[1]);
        const len = parseInt(id.split('-')[2]);
        const keyShape = group.addShape('path', {
            attrs: {
                x: 0,
                y: 0,
                path: this.getPath(cfg),
                fill: cfg.style.fill,
                // matrix: cfg.style.matrix
            },
            name: 'pointer-path'
        });

        const angle = index *  Math.PI * 2 / len;
        if (cfg.label) {
            const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
            
            const bgRect = group.addShape('rect', {
                attrs: {
                    x: 0, 
                    y: 0,
                    width: 0,
                    height: 0,
                    text: cfg.label,
                    fill: null,
                    radius: 2
                },
                name: 'bgRect'
            });

            let label = cfg.label as string;

            let pointerText = label.split('-')[0];
            let y = pointerText=="front"?30:15;
            const text = group.addShape('text', {
                attrs: {
                    x: culcuRotate(Math.PI/2 - angle, y).offsetX, 
                    y: culcuRotate(Math.PI/2 - angle, y).offsetY,
                    // x: 0, 
                    // y: 0,
                    textAlign: 'center',
                    textBaseline: 'middle',
                    text: pointerText,
                    fill: style.fill || '#999',
                    fontSize: style.fontSize || 16
                },
                name: 'pointer-text-shape'
            });

            // rotate(text, angle, G6.Util.transform);
            translate(text, 0, -75, Util.transform);
        }
        rotate(keyShape, angle, Util.transform);
        translate(keyShape, 0, -75, Util.transform);

        return keyShape;

        
    },
    
    getPath(cfg) {
        let width = 1,
            height = 38,
            arrowWidth = width + 4,
            arrowHeight = height * 0.3;

        const path = [
            ['M', 0, 0], 
            ['L', -width / 2, 0],
            ['L', -width / 2, -height],
            ['L', -width / 2 - (arrowWidth / 2), -height],
            ['L', 0, -height-arrowHeight],
            ['L', width / 2 + (arrowWidth / 2), -height],
            ['L', width / 2, -height],
            ['L', width / 2, 0],
            ['Z'], 
        ];

        return path;
    },

});

        
function rotate(shape, angle, transform) {
    const matrix1 = shape.getMatrix();
    const newMatrix1 = transform(matrix1, [
        ['r', angle],
    ]);
    shape.setMatrix(newMatrix1);
}
function translate(shape, x, y, transform) {
    const matrix1 = shape.getMatrix();
    const newMatrix1 = transform(matrix1, [
        ['t', x, y],
    ]);
    shape.setMatrix(newMatrix1);
}
function culcuRotate(angle, R) {
    let offsetX = Math.cos(angle) * R;
    let offsetY = -Math.sin(angle) * R;
    console.log(offsetX, offsetY, R);
    return {
        offsetX,
        offsetY,
    }
}