const { __ } = wp.i18n;
const { InspectorControls } = wp.blockEditor;
const { registerBlockType } = wp.blocks;

#Component
import BlockBorder from '../components/block-border/index';

registerBlockType( 'maxi-blocks/example-block', {
    title: __('Example block', 'maxi-blocks'),
    icon: icon,
    category: 'maxi-blocks',
    attributes: {
        border: {
            type: 'string',
            'default': JSON.stringify(mainObject)
        }
    },
    edit: (props) => {
        return (
            <InspectorControls>
                <BlockBorder 
                    border={props.attributes.border},
                    onChange={border => props.setAttributes({border})}
                    breakpoint={deviceType}
                />
            </InspectorControls>
        )
    }
    save: () => {
        return null;
    }
} );

{
    "label": "Border",
    "general": {
        "border-color": "#ffffff",
        "border-style": "none"
    },
    "xl": {
        "border-color": "",
        "border-style": ""
    },
    "l": {
        "border-color": "",
        "border-style": ""
    },
    "m": {
        "border-color": "",
        "border-style": ""
    },
    "s": {
        "border-color": "",
        "border-style": ""
    },
    "xs": {
        "border-color": "",
        "border-style": ""
    },
    "borderWidth": {
        "label": "Border width",
        "unit": "px",
        "general": {
            "border-top-width": 0,
            "border-right-width": 0,
            "border-bottom-width": 0,
            "border-left-width": 0,
            "sync": true
        },
        "xl": {
            "border-top-width": "",
            "border-right-width": "",
            "border-bottom-width": "",
            "border-left-width": "",
            "sync": true
        },
        "l": {
            "border-top-width": "",
            "border-right-width": "",
            "border-bottom-width": "",
            "border-left-width": "",
            "sync": true
        },
        "m": {
            "border-top-width": "",
            "border-right-width": "",
            "border-bottom-width": "",
            "border-left-width": "",
            "sync": true
        },
        "s": {
            "border-top-width": "",
            "border-right-width": "",
            "border-bottom-width": "",
            "border-left-width": "",
            "sync": true
        },
        "xs": {
            "border-top-width": "",
            "border-right-width": "",
            "border-bottom-width": "",
            "border-left-width": "",
            "sync": true
        }
    },
    "borderRadius": {
        "label": "Border radius",
        "unit": "px",
        "general": {
            "border-top-left-radius": 0,
            "border-top-right-radius": 0,
            "border-bottom-right-radius": 0,
            "border-bottom-left-radius": 0,
            "sync": true
        },
        "xl": {
            "border-top-left-radius": "",
            "border-top-right-radius": "",
            "border-bottom-right-radius": "",
            "border-bottom-left-radius": "",
            "sync": true
        },
        "l": {
            "border-top-left-radius": "",
            "border-top-right-radius": "",
            "border-bottom-right-radius": "",
            "border-bottom-left-radius": "",
            "sync": true
        },
        "m": {
            "border-top-left-radius": "",
            "border-top-right-radius": "",
            "border-bottom-right-radius": "",
            "border-bottom-left-radius": "",
            "sync": true
        },
        "s": {
            "border-top-left-radius": "",
            "border-top-right-radius": "",
            "border-bottom-right-radius": "",
            "border-bottom-left-radius": "",
            "sync": true
        },
        "xs": {
            "border-top-left-radius": "",
            "border-top-right-radius": "",
            "border-bottom-right-radius": "",
            "border-bottom-left-radius": "",
            "sync": true
        }
    }
}