import Drawer from './drawer.js';
class IvsDrawer extends Drawer {
    constructor(canvas) {
        super(canvas);
        this.confidence = 200; //关键点最低置信度
        this.displayNum = 7; //大于等于该值时才绘制姿态
    }

    _init() {
        this.context.textAlign = 'left';
        this.context.textBaseline = 'bottom';
    }

    draw(data, time) {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        let rect = null;
        data.map((content, k) => {
            switch (content.type) {
                case 'rect':
                    this.context.beginPath();
                    this.context.strokeStyle = '#00ff00';
                    this.context.fillStyle = '#00ff00';
                    this.context.lineWidth = 1;//线条的宽度
                    this.context.font = 'bold 20px Arial';
                    if (!content.quality) {
                        this.context.strokeStyle = '#ff0000';
                    }

                    rect = this._toRealCoordinate(content.rect[0], content.rect[1]);
                    rect.push.apply(rect, this._toRealCoordinate(content.rect[2], content.rect[3]));
                    this._drawRect(rect);

                    //this.context.font = 'bold 20px Arial';
                    //this.context.fillStyle = '#00ff00';
                    // this._drawText(content.id, rect[0], rect[1]);
                    // this._drawText(content.id, rect[0], rect[1]);
                    // if (content.text) {
                    //     this._drawText(content.text, rect[0], rect[1] - 20);
                    // }
                    if (content.text !== undefined) {
                        this._drawText(content.text, rect[0], rect[1] - 5);
                    }
                    //console.log('绘制 ', time)
                    this.context.stroke();
                    this.context.closePath();
                    break;
                case 'text':
                    break;
                case 'coco-pose':
                    let {points, boundingBox, handsUp, boxConfidence} = content,
                        length = points.length,
                        undrawPoints = [],
                        bodyLineWidth = boundingBox[2] > 2048 ? 6 : ( boundingBox[2] > 512 ? 4 : 2);
                    //过滤掉置信点不够的情况
                    let confidencePoint = points.filter((point) => {
                        return point.confidence > this.confidence;
                    });
                    if (confidencePoint.length >= this.displayNum) {
                        this.context.lineWidth = bodyLineWidth;
                        //绘制实线
                        for (let i = 0; i < length; i++) {
                            if (undrawPoints.includes(i) || points[i].parent === -1) {
                                continue;
                            }
                            let point = this._toRealCoordinate(points[i].x, points[i].y);
                            let parentNode = points[points[i].parent];
                            let parentPoint = this._toRealCoordinate(parentNode.x, parentNode.y);

                            this.context.strokeStyle = handsUp ? '#ff0000' : points[i].pointColor;
                            //confidence高于阈值时画实线，否则透明度降低
                            if ((points[i].confidence <= this.confidence) || (parentNode.confidence <= this.confidence)) {
                                this.context.globalAlpha = 0.3;
                            }
                            this.context.beginPath();
                            this.context.moveTo(point[0], point[1]);
                            this.context.lineTo(parentPoint[0], parentPoint[1]);
                            this.context.stroke();
                            this.context.globalAlpha = 1;
                            this.context.closePath();
                        }
                        //绘制圆
                        for (let i = 0; i < length; i++) {
                            if (undrawPoints.includes(i)) {
                                continue;
                            }
                            this.context.fillStyle = handsUp ? '#ffff00' : points[i].pointColor;
                            //if ((points[i].parent !== -1 && points[i].confidence > this.confidence && points[points[i].parent].confidence > this.confidence)
                            //    || (points[i].parent === -1 && points[i].confidence > this.confidence)) {
                            let point = this._toRealCoordinate(points[i].x, points[i].y);
                            this.context.beginPath();
                            this._drawArc(point[0], point[1], bodyLineWidth);
                            this.context.fill();
                            this.context.closePath();
                            //}
                        }
                    } else {
                        //console.log('only', confidencePoint.length, ' points');
                    }
                    //绘制人体框
                    if (boxConfidence >= 0) {
                        this.context.beginPath();
                        this.context.lineWidth = 1;//线条的宽度
                        this.context.strokeStyle = '#ff0000';
                        this.context.fillStyle = '#ffff00';
                        this.context.font = 'bold 20px Arial';
                        rect = this._toRealCoordinate(boundingBox[0], boundingBox[1]);
                        rect.push.apply(rect, this._toRealCoordinate(boundingBox[2], boundingBox[3]));
                        this._drawRect(rect);
                        this._drawText(content.id, rect[0], rect[1] - 10);
                        this.context.stroke();
                        this.context.closePath();
                    }
                    break;
                default:
                    console.log('unknown ivs type: ', content.type);
                    break;
            }
        });

    }


    _drawRect(rect) {
        //console.log(rect)
        this.context.rect(rect[0], rect[1], rect[2], rect[3]);
    }

    _drawText(text, x, y) {
        this.context.fillText(text, x, y);
    }

    _drawArc(x, y, r) {
        this.context.arc(x, y, r, 0, 360);
    }
}

function f() {

}

export default IvsDrawer;
