function parentWidth(elem) {
    return elem.parentElement.clientWidth;
}

class Custom_block {
    constructor(parent_element) {
        this.element = parent_element;
    }

    params(params) {
        this._params = params;
    }

    create() {
        let svg = document.createElementNS('http://www.w3.org/2000/svg', "svg");

        // Текси верхнего блока
        let up_text_block = this.element.querySelector(".up_text_block");
        let up_text_block_text = '';
        if (up_text_block !== null){
            up_text_block_text = up_text_block.innerHTML;
        }
        if (this._params.hasOwnProperty("up_text")){
            up_text_block_text = this._params.up_text;
        }
        //

        // Текст нижнего блока
        let down_text_block = this.element.querySelector(".down_text_block");
        let down_text_block_text = '';
        if (down_text_block !== null){
            down_text_block_text = down_text_block.innerHTML;
        }
        if (this._params.hasOwnProperty("down_text")){
            down_text_block_text = this._params.down_text;
        }
        //

        // Текст заголовка
        let title_block = this.element.querySelector(".title_block");
        let title_block_text = '';
        if (title_block !== null){
            title_block_text = title_block.innerHTML;
        }
        if (this._params.hasOwnProperty("title_text")){
            title_block_text = this._params.title_text;
        }
        //
        up_text_block = up_text_block_text.replace(/(\r\n|\n|\r)/gm, "").trim();
        down_text_block = down_text_block_text.replace(/(\r\n|\n|\r)/gm, "").trim();
        title_block = title_block_text.replace(/(\r\n|\n|\r)/gm, "").trim();

        this.element.innerHTML = "";
        this.element.appendChild(svg);
        let parent_w = parentWidth(svg)
        svg.setAttribute("width", parent_w)
        let parent_h = 300;
        let font_size = svg.style;
        let margin_top = this._params.margin_top ?? 40;
        let margin_left = this._params.margin_left ?? 20;
        let padding_top = this._params.padding_top ?? 0;
        let padding_bottom = this._params.padding_bottom ?? 20;

        let br = this._params.border_radius ? Number(this._params.border_radius) : 20;

        let right_down_rect_w = this._params.right_down_rect_w ? Number(this._params.right_down_rect_w) : 100;
        let right_down_rect_h = this._params.right_down_rect_h ? Number(this._params.right_down_rect_h) : 100;
        let left_up_rect_w = this._params.left_up_rect_w ? Number(this._params.left_up_rect_w) : 350;
        let left_up_rect_h = this._params.left_up_rect_h ? Number(this._params.left_up_rect_h) : 50;
        // базовые настройки

        // Расчет верхней грани
        let up_size = parent_w - (br * 4) - 40 - left_up_rect_w - margin_left;
        //

        // Расчет нижняя грань
        let down_size = parent_w - (br * 4) - 40 - right_down_rect_w - margin_left;
        //

        let title_text = title_block ?? "Hello Name Hello Name";

        let title_font_size = this._params.title_font_size ?? 28;
        let up_text = up_text_block ?? "Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю."
        let down_text = down_text_block ?? "Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю."
        let default_font_size = this._params.block_font_size ?? 16;

        // Верхний текст, расчет
        let up_text_ln = up_text.length * default_font_size;
        let count_symbols_at_row_up_text = (Math.round(up_size / default_font_size) * 2) - 5;
        let rows_count_up_text = Math.round(up_text.length / count_symbols_at_row_up_text);
        let rows_up_text = this.get_tspan_arr(up_text_block, count_symbols_at_row_up_text);
        //

        // Расчет нижний текст
        let down_text_ln = down_text.length * default_font_size;
        let count_symbols_at_row_down_text = (Math.round(down_size / default_font_size) * 2) - 5;
        let rows_count_down_text = Math.round(down_text.length / count_symbols_at_row_down_text);
        let rows_down_text = this.get_tspan_arr(down_text_block, count_symbols_at_row_down_text);
        //

        // Расчет заголовок текст
        let title_text_ln = title_text.length * title_font_size;
        let count_symbols_at_row_title_text = (Math.round(left_up_rect_w / title_font_size) * 2);
        let rows_count_title_text = Math.round(title_text.length / count_symbols_at_row_title_text)
        //

        // Расчет правый блок
        let right_size = rows_count_up_text * default_font_size;
        //

        // Расчет левой грани
        let left_size = rows_count_down_text * default_font_size;
        //

        // Расчет блока для заголовка
        let title_box = rows_count_title_text * title_font_size;
        //

        if (title_box > left_up_rect_h) {
            left_up_rect_h = title_box;
        }

        // Расчет стартовые координаты
        let start_point_y;
        if (left_up_rect_h > right_size) {
            start_point_y = left_up_rect_h + (br * 2) + margin_top;
            right_size = left_up_rect_h;
        } else {
            start_point_y = right_size + (br * 2) + margin_top;
            left_up_rect_h = right_size;
        }
        let start_point_x = margin_left;
        //

        //let start_point_y = left_up_rect_h > right_size ? left_up_rect_h : right_size + (br * 2) + margin_top;

        // Расчет левой грани
        if (right_down_rect_h > left_size) {
            left_size = right_down_rect_h;
        } else {
            right_down_rect_h = left_size;
        }

        parent_h = left_size + right_size + (br * 4);

        //
        let right_min_size = parent_h - (br * 2) - right_down_rect_h;

        let path_d = `m ${start_point_x} ${start_point_y} `;
        let left_down = `l 0 ${left_size} q 0 ${br} ${br} ${br} `;
        let down = `l ${down_size} 0 `;
        let right_down_rect = `q ${br} 0 ${br} -${br} l 0 -${right_down_rect_h} q 0 -${br} ${br} -${br} l ${right_down_rect_w} 0 q ${br} 0 ${br} -${br} `;
        let right_up = `l 0 -${right_size} q 0 -${br} -${br} -${br} `;
        let up = `l -${up_size} 0 `;
        let left_up_rect = `q -${br} 0 -${br} ${br} l 0 ${left_up_rect_h} q 0 ${br} -${br} ${br} l -${left_up_rect_w} 0 q -${br} 0 -${br} ${br}`;

        let new_path = document.createElementNS('http://www.w3.org/2000/svg', "path");
        new_path.setAttribute("id", "main");
        new_path.setAttributeNS(null, "d", path_d + left_down + down + right_down_rect + right_up + up + left_up_rect);
        new_path.setAttribute("stroke", this._params.border_color ?? "MistyRose");
        new_path.setAttribute("stroke-width", 3);
        new_path.setAttribute("fill", this._params.background_color ?? "MintCream");

        let grid = document.createElementNS('http://www.w3.org/2000/svg', "path");

        let grid_horizontal = "";
        for (let i = 0; i < parent_h; i = i + 20) {
            grid_horizontal = grid_horizontal + `M 0 ${i} L ${parent_w} ${i}`
        }
        grid.setAttribute("stroke", "grey");
        grid.setAttribute("stroke-width", 1);
        grid.setAttribute("opacity", 0.3);
        grid.setAttribute("d", grid_horizontal);

        svg.appendChild(new_path);
        //svg.appendChild(grid);

        let up_text_box = document.createElementNS('http://www.w3.org/2000/svg', "text");
        up_text_box.setAttribute("y", margin_top + padding_top)

        rows_up_text.forEach((item) => {
            let up_text_span = document.createElementNS('http://www.w3.org/2000/svg', "tspan");
            up_text_span.innerHTML = item;
            let x = left_up_rect_w + (br * 3) + margin_left;
            up_text_span.setAttribute("x", x)
            up_text_span.setAttribute("dy", "1em")
            up_text_span.setAttribute("font-size", default_font_size)
            up_text_box.appendChild(up_text_span)
        });

        // for (let i = 0; i < rows_count_up_text; i++) {
        //     let up_text_span = document.createElementNS('http://www.w3.org/2000/svg', "tspan");
        //     up_text_span.innerHTML = up_text.substring(i * count_symbols_at_row_up_text, (i + 1) * count_symbols_at_row_up_text);
        //     let x = left_up_rect_w + (br * 3) + margin_left;
        //     up_text_span.setAttribute("x", x)
        //     up_text_span.setAttribute("dy", "1em")
        //     up_text_span.setAttribute("font-size", default_font_size)
        //     up_text_box.appendChild(up_text_span)
        // }

        let down_text_box = document.createElementNS('http://www.w3.org/2000/svg', "text");
        down_text_box.setAttribute("y", start_point_y)

        rows_down_text.forEach((item) => {
            let down_text_span = document.createElementNS('http://www.w3.org/2000/svg', "tspan");
            down_text_span.innerHTML = item;
            let x = margin_left + br
            down_text_span.setAttribute("x", x)
            down_text_span.setAttribute("dy", "1em")
            down_text_span.setAttribute("font-size", default_font_size)
            down_text_box.appendChild(down_text_span)
        });

        // for (let i = 0; i < rows_count_down_text; i++) {
        //     let down_text_span = document.createElementNS('http://www.w3.org/2000/svg', "tspan");
        //     down_text_span.innerHTML = down_text.substring(i * count_symbols_at_row_down_text, (i + 1) * count_symbols_at_row_down_text);
        //     let x = margin_left + br
        //     down_text_span.setAttribute("x", x)
        //     down_text_span.setAttribute("dy", "1em")
        //     down_text_span.setAttribute("font-size", default_font_size)
        //     down_text_box.appendChild(down_text_span)
        // }

        let title_text_box = document.createElementNS('http://www.w3.org/2000/svg', "text");
        title_text_box.setAttribute("y", margin_top);

        console.log(rows_count_title_text)
        for (let i = 0; i < rows_count_title_text; i++) {
            let title_text_span = document.createElementNS('http://www.w3.org/2000/svg', "tspan");
            title_text_span.innerHTML = title_text.substring(i * count_symbols_at_row_title_text, (i + 1) * count_symbols_at_row_title_text);
            title_text_span.setAttribute("x", margin_left);
            title_text_span.setAttribute("dy", "1em");
            title_text_span.setAttribute("font-size", title_font_size);
            title_text_box.appendChild(title_text_span);
        }

        console.log(down_size + right_down_rect_w + (br * 4) - right_down_rect_w - margin_left)
        let right_down_rect_obj = document.createElementNS('http://www.w3.org/2000/svg', "rect");
        right_down_rect_obj.setAttribute("x", start_point_x + down_size + (br * 3));
        right_down_rect_obj.setAttribute("y", start_point_y + left_size - right_down_rect_h);
        right_down_rect_obj.setAttribute("width", right_down_rect_w + br);
        right_down_rect_obj.setAttribute("height", right_down_rect_h + br);
        right_down_rect_obj.setAttribute("rx", br);
        right_down_rect_obj.setAttribute("fill", "Yellow");
        right_down_rect_obj.setAttribute("stroke", "MistyRose");
        right_down_rect_obj.setAttribute("stroke-width", 3);

        svg.setAttribute("height", start_point_y + left_size + br + padding_bottom);

        svg.appendChild(up_text_box);
        svg.appendChild(down_text_box);
        svg.appendChild(title_text_box);
        svg.appendChild(right_down_rect_obj);

    }

    get_tspan_arr(text, symbol_count_at_row) {
        if (text === ""){
            return [];
        }
        const wordsArray = [...text.match(/\S+/g)];

        let rows = [];
        let str = '';
        let counter = 0;

        wordsArray.forEach((item, i, arr) => {
            if (counter === 0) {
                str = `${item}`;
            } else {
                str = `${str} ${item}`;
            }

            let str_with_next_word = `${str} ${arr[i + 1]}`
            counter = counter + item.length + 1;
            if (str_with_next_word.length > symbol_count_at_row - 1 || i === arr.length - 1) {
                rows.push(str);
                str = '';
                counter = 0;
            }
        });

        return rows;
    }
}


const cb = function (selector, params) {
    let elements = document.querySelectorAll(selector);
    elements.forEach((item) => {
        let cb_obj = new Custom_block(item);
        cb_obj.params(params);
        cb_obj.create();
    });
}