/**
 * 绘制矩形
 * @param layer 图层
 * @param item 绘制对象
 */
const drawRect = (stage, layer, item, tr) => {
    /** 先声明组合 然后画图形 有文字则画文字 最后填充layer */
    var originalAttrs = {
        x: item.position.x,
        y: item.position.y,
        scaleX: 1,
        scaleY: 1,
        draggable: false,
        rotation: 0
    };

    var group = new Konva.Group(originalAttrs);
    var rect = new Konva.Rect({
        stroke: item.border ? "#" + item.border.color : '',
        strokeWidth: item.border ? item.border.width : 1,
        fill: item.fill ? "#" + item.fill.color : '',
        width: item.position.cx,
        height: item.position.cy,
        shadowColor: "black",
        draggable: false
    });
    group.add(rect);
    if (item.paragraph && item.paragraph[0].texts.length) drawText(stage, layer, item.paragraph, group)
    layer.add(group);
    group.zIndex(item.index)
    layer.draw();
};

/** 绘制弧形 */
const drawArc = (stage, layer, item) => {
    /** 先声明组合 然后画图形 有文字则画文字 最后填充layer */
    var originalAttrs = {
        x: item.position.x,
        y: item.position.y,
        scaleX: 1,
        scaleY: 1,
        draggable: false,
        rotation: 0
    };

    var group = new Konva.Group(originalAttrs);
    var arc = new Konva.Path({
        data: item.svg.svgShape[0].d,
        stroke: "#" + item.border.color,
        strokeWidth: item.border.width,
        draggable: false
    });
    group.add(arc);

    if (item.paragraph && item.paragraph[0].texts.length) drawText(stage, layer, item.paragraph, group)
    layer.add(group);
    group.zIndex(item.index)
    layer.draw();
};

/** 绘制弧形 */
const drawEllipse = (stage, layer, item) => {
    /** 先声明组合 然后画图形 有文字则画文字 最后填充layer */
    var originalAttrs = {
        x: item.position.x + item.position.cx / 2,
        y: item.position.y + item.position.cy / 2,
        scaleX: 1,
        scaleY: 1,
        draggable: false,
        rotation: 0
    };

    var group = new Konva.Group(originalAttrs);
    var arc = new Konva.Ellipse({
        width: +item.position.cx,
        height: +item.position.cy,
        radiusX: +item.svg.svgShape[0].rx,
        radiusY: +item.svg.svgShape[0].ry,
        stroke: item.border.color,
        strokeWidth: item.border.width
    });


    if (item.fill.image) {
        var imageObj = new Image();
        imageObj.onload = function () {
            arc.fillPatternImage(imageObj);
            group.add(arc);
            if (item.paragraph && item.paragraph[0].texts.length) drawText(stage, layer, item.paragraph, group)

        };
        imageObj.src = item.fill.image;
    }

    layer.add(group);
    group.zIndex(item.index)
    layer.draw();
};


/** 绘制多边形Line */
const drawLine = (stage, layer, item) => {
    /** 先声明组合 然后画图形 有文字则画文字 最后填充layer */
    var originalAttrs = {
        x: item.position.x,
        y: item.position.y,
        scaleX: 1,
        scaleY: 1,
        draggable: false,
        rotation: 0
    };

    var group = new Konva.Group(originalAttrs);

    let svgShape = item.svg.svgShape[0]
    var poly = new Konva.Line({
        points: svgShape.points.replace(/\s+/g,",").split(',').map(i => +i),
        fill:item.fill ? '#' + item.fill.color : '',
        stroke: '#' + item.border.color,
        strokeWidth: item.border.width,
        closed: svgShape.type !== 'polyline',
    });
    group.add(poly);
    if (item.paragraph && item.paragraph[0].texts.length) drawText(stage, layer, item.paragraph, group)
    layer.add(group);
    group.zIndex(item.index)
    layer.draw();
};

/** 绘制路径 */
const drawPath = (stage, layer, item) => {
    /** 先声明组合 然后画图形 有文字则画文字 最后填充layer */
    var originalAttrs = {
        x: item.position.x,
        y: item.position.y,
        scaleX: 1,
        scaleY: 1,
        draggable: false,
        rotation: 0
    };
    let svgShape = item.svg.svgShape[0]
    var group = new Konva.Group(originalAttrs);
    var arc = new Konva.Path({
        data: svgShape.d,
        fill: item.fill && svgShape.d && svgShape.d.substring(svgShape.d.length - 1) === 'z' ? '#' + item.fill.color : '',
        stroke: "#" + item.border.color,
        strokeWidth: item.border.width,
        rotation: svgShape.transform ? +svgShape.transform.substring(7, svgShape.transform.length - 1).split(',')[0] : 0,
        draggable: false
    });
    group.add(arc);

    if (item.paragraph && item.paragraph[0].texts.length) drawText(stage, layer, item.paragraph, group)
    layer.add(group);
    group.zIndex(item.index)
    layer.draw();
};


/** 绘制图片 */
const drawImage = (stage, layer, item, tr) => {
    Konva.Image.fromURL(item.image, function (darthNode) {
        darthNode.setAttrs({
            x: item.position.x,
            y: item.position.y,
            width: item.position.cx,
            height: item.position.cy,
            draggable: false
        });
        layer.add(darthNode);
        layer.add(tr)
        layer.draw();
    });
}

/** 绘制文本 */
const drawText = (stage, layer, paragraph, group) => {
    paragraph.forEach(txt => {
        var complexText = new Konva.Text({
            x: 0,
            y: 0,
            text: txt.texts[0].content,
            fontSize: txt.texts[0].style.size,
            // fontFamily: txt.texts[0].style.family,
            fill: "#" + txt.texts[0].style.color,
            verticalAlign: txt.texts[0].style.vertAlign,
            align: txt.texts[0].style.align,
            textDecoration: txt.texts[0].style.decoration,
            fontStyle: txt.texts[0].style.weight === 'bold' ? 'bold' : 'normal'
        });

        complexText.on('dblclick', () => {
            // create textarea over canvas with absolute position

            // first we need to find position for textarea
            // how to find it?

            // at first lets find position of text node relative to the stage:
            var textPosition = complexText.getAbsolutePosition();

            // then lets find position of stage container on the page:
            var stageBox = stage.container().getBoundingClientRect();

            // so position of textarea will be the sum of positions above:
            var areaPosition = {
                x: stageBox.left + textPosition.x,
                y: stageBox.top + textPosition.y,
            };

            // create textarea and style it
            var textarea = document.createElement('textarea');
            document.body.appendChild(textarea);

            textarea.value = complexText.text();
            textarea.style.position = 'absolute';
            textarea.style.top = areaPosition.y + 'px';
            textarea.style.left = areaPosition.x + 'px';
            textarea.style.width = complexText.width();
            textarea.focus();
            textarea.addEventListener('keydown', function (e) {
                // hide on enter
                if (e.keyCode === 13) {
                    complexText.text(textarea.value);
                    layer.draw();
                    document.body.removeChild(textarea);
                }
            });
        });
        group.add(complexText);
    });
}

/**
 * 导出 
 **/
export {
    drawRect, drawArc, drawEllipse, drawPath, drawImage , drawLine
}