    import Tag from './Tag';
    import Text from './Text';

    /** @module svgObjects.MultiLineText */

    /**
     * Multi line text element in SVG
     *
     * Multi line text is not natively supportend in SVG 1.1,
     * the workaround is to use the <foreignObject> element and display
     * a HTML paragraph inside of the SVG document.
     *
     * Because this technique is not supported by all of the browsers,
     * the foreignObject element is wrapped in <switch>, which
     * provides fallback for those cases.
     *
     * read more: [foreignObject on MDN web docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject)
     *
     * @extends Tag
     */
    export default class MultiLineText extends Tag {
        /**
         * @param {number} x       horizontal position in SVG pixels
         * @param {number} y       vertical position in SVG pixels
         * @param {number} w       width of the text box in SVG pixels
         * @param {number} h       height of the text box in SVG pixels
         * @param {number} text    text content of the text box
         * @param {string} size    CSS font size of the text
         * @param {String} [color="black"] color of the text
         *
         */
        constructor(x, y, w, h, text, size, color = 'black') {
            super('switch');

            let foreignObject = new Tag('foreignObject');
            let alternativeText = new Text(x, y, w, h, text, size, color);

            foreignObject.addAttr({
                x,
                y,
                width: w,
                height: h
            });

            let $wrapper = $('<div>')
                .attr('xmlns', 'http://www.w3.org/1999/xhtml')
                .addClass('multilinetext')
                .css('height', h);

            let $paragraph = $('<p>')
                .attr('xmlns', 'http://www.w3.org/1999/xhtml')
                .css('font-size', size)
                .append(text);

            $wrapper.append($paragraph);
            foreignObject.$el.append($wrapper);

            this.$el.append(foreignObject.$el).append(alternativeText.$el);
        }
    }