const baseBlock = {
    type    : "(string) block type",
    value   : {},
    options : {
        anchor : "(string) id for block or null",
        styles : {
            width         : "(int) 30-100 in percent",
            blockPosition : "(string) left/center/right",
            padding       : {
                top    : "(int) 1 - 10",
                bottom : "(int) 1 - 10",
            },
            background    : {
                type  : "color",
                value : "(string) color as HEX",
            },
        },
    },
}

class Block {
    static DEFAULT_VALUE = {};

    /**
     * Prop description
     *
     * @type {Object}
     */
    #value = {};

    /**
     * Anchor for block wrapper int html
     *
     * @type {null|string}
     */
    #optionsAnchor = null;

    /**
     * Prop description
     *
     * @type {null|int}
     */
    #optionsStyleWidth = null;

    /**
     * Prop description
     *
     * @type {null|string}
     */
    #optionsStyleBlockPosition = null;

    /**
     * Prop description
     *
     * @type {null|int}
     */
    #optionsStylePaddingTop = null;

    /**
     * Prop description
     *
     * @type {null|int}
     */
    #optionsStylePaddingBottom = null;

    /**
     * Prop description
     *
     * @type {null|string}
     */
    #optionsStyleBackgroundType = null;

    /**
     * Prop description
     *
     * @type {null|stirng}
     */
    #optionsStyleBackgroundValue = null;

    /**
     *
     * @param {null|Object} value content value
     */
    constructor(value = null) {
        this.value = Object.assign(this.#value, value || this.constructor.name.DEFAULT_VALUE);
    }

    /*** Setter examople start ***/
    /**
     * Set anchor for block wrapper int html
     *
     * @param value
     *
     * @returns {Block}
     */
    setOptionAnchor(value) {
        this.#optionsAnchor = value;

        return this;
    }

    /************ OR ***************/

    /**
     * Set anchor for block wrapper int html
     *
     * @param value
     *
     * @returns {Block}
     */
    setAnchor(value) {
        this.#optionsAnchor = value;

        return this;
    }
    /*** Setter example end ***/

    /**
     * Init new instance by JSON-object by block notation
     *
     * @param {Object} data
     *
     * @return self
     */
    static initNew(data){
        let instance = new this.constructor.name();

        retrun instance.parce(data);
    }

    /**
     * Parse to current instance by JSON-object by block notation
     *
     * @param {Object} data
     *
     * @return self
     */
    parse(data){
        /**
         * main parce processing (value,standard options)
         */

        this.#parseByChild(data);
    }

    #parseByChild(data){
        /**
         * to do nothing - implement only in child classes
         */
    }

    /**
     * get block content as HTML
     * @returns {string} HTML as string
     */
    toHTML() {
        throw new Error("Method getHTML not implemented");
    }

    /**
     * get block content as JSON
     * @returns {} content as object
     */
    toJSON() {
        let classname = this.constructor.name;

        return {
            type    : classname.substring(0, 1).toLowerCase() + classname.substring(1),
            value   : this.value,
            options : {
                anchor : this.#optionsAnchor,
                /**
                 * other struct ...
                 */
            },
        };
    }
}

class TitleBlock extends Block {
    static DEFAULT_VALUE = {
        pretitle : null,
        title    : "Headline H2",
        subtitle : null,
    };

    /**** Specific data example start ****/
    /**
     * Prop descriptor
     *
     * @type {null|string}
     */
    #valueTitle = null;

    /*** Setter examople start ***/
    /**
     * Set anchor for block wrapper int html
     *
     * @param value
     *
     * @returns {Block}
     */
    setValueTitle(value) {
        this.#valueTitle = value;

        return this;
    }

    /************ OR ***************/

    /**
     * Set anchor for block wrapper int html
     *
     * @param value
     *
     * @returns {Block}
     */
    setTitle(value) {
        this.#valueTitle = value;

        return this;
    }
    /*** Setter example end ***/


    /******** ================ OR ================ ********/

    /*** Setter examople start ***/
    /**
     * Set anchor for block wrapper int html
     *
     * @param value
     *
     * @returns {Block}
     */
    setValueTitle(value) {
        this.#value.title = value;

        return this;
    }

    /************ OR ***************/

    /**
     * Set anchor for block wrapper int html
     *
     * @param value
     *
     * @returns {Block}
     */
    setTitle(value) {
        this.#title = value;

        return this;
    }

    /**** Specific data example start ****/


    #parseByChild(data){
        /**
         * child parce processing (value,standard options)
         */
    }
}

document.addEventListener("DOMContentLoaded", function () {
    let titleBlock = TitleBlock.initNew(
        {
            pretitle : "pretitle",
            title    : "Headline H1",
            subtitle : "Lorem Ipsum bla bla bla",
        },
        {
            anchor : "title",
            level  : 1,
            styles : {
                background : {
                    type  : "color",
                    value : "#f3f3f3",
                },
            },
        },
    );

    console.log(titleBlock.toHTML());
    console.log(titleBlock.toJSON());
});