import React from 'react';

export default {
    // Internal id of the component
    id: "HeroBlockmdx",
    // Visible label
    label: "Hero Block",
    // Fields the user need to fill out when adding an instance of the component
    fields: [
        {name: 'id', label: 'Asset ID', widget: 'string'},
        {name: 'type', label: 'Asset Type', widget: 'string'}],
    // Pattern to identify a block as being an instance of this component
    // (?:^ the ^ was suggested to help with matching multiple components on the page.
    // ...(.?)... Lazy match child elements of the block.
    // ms not using g i think helped correctly match when multiple components on the page.
    //pattern: /(?:^<HeroBlock data=')(.[^']+)(?:.*?>)(.?)(?:<\/HeroBlock>)/ms,
    // See if different pattern from above makes a difference.
    pattern: /<HeroBlock.*?HeroBlock>/ms,
    // Function to extract data elements from the regexp match
    fromBlock: function (match) {
        let data = match[0];
        console.log("fromBlock(match) : " + data);
        const r = RegExp(/(?:^<HeroBlock data=')(.[^']+)(?:.*?>)(.?)(?:<\/HeroBlock>)/ms)
        data = r.exec(data);
        data = data[1];
        data = JSON.parse((decodeURI(data)));
        console.log("fromBlock(data) : " + JSON.stringify(data));

        // Some validation.
        if (data == null) {
            data = {id: "none", type: "none"}
        } else {
            !data.hasOwnProperty("id") ? data.id = "none" : null;
            !data.hasOwnProperty("type") ? data.type = "none" : null;
        }
        console.log("fromBlock()  data validated : " + JSON.stringify(data));
        return data;
    },
    // Function to create a text block from an instance of this component
    toBlock: function (obj) {
        const data = JSON.stringify({
            id: obj.id || "none",
            type: obj.type || "none",
        });
        console.log("toBlock()  Data:" + JSON.stringify(obj));
        return `<HeroBlock data='${encodeURI(data)}'></HeroBlock>`
    },

    // Preview output for this component. Can either be a string or a React component
    // (component gives better render performance)
    toPreview: function (obj) {
        console.log("toPreview: "+JSON.stringify(obj));
        return (
            // <HeroBlock data={obj}></HeroBlock>
            <div>{JSON.stringify(obj)}</div>
        );
    }
}