const { addFilter } = wp.hooks;
const { createHigherOrderComponent } = wp.compose;
const { createElement, Fragment } = wp.element;
const { InspectorControls } = wp.blockEditor;
const { Notice } = wp.components;

const BLOCKS_WITH_ALT = {
  'core/image': 'alt',
  'core/cover': 'alt',
  'core/media-text': 'mediaAlt'
}

const addAltTextNotice = createHigherOrderComponent((BlockEdit) => {
    return function (props) {
        const altAttribute = BLOCKS_WITH_ALT[props.name];

        if (!altAttribute) {
            return createElement(BlockEdit, props);
        }
        
        const altValue = props.attributes[altAttribute];
        const hasAlt = altValue && altValue.trim() !== '';
        return createElement(
            'div',
            { className: props.attributes.align ? `align${props.attributes.align}` : '',style: { position: 'relative' } },
            createElement(BlockEdit, props),
            !hasAlt && createElement(
                'div',
                {
                    style: {
                        position: 'absolute',
                        bottom: '0',
                        left: '0',
                        right: '0',
                        zIndex: 100,
                    }
                },
                createElement(
                    Notice,
                    {
                        status: 'error',
                        isDismissible: false,
                    },
                    '⚠️ Add the alternative text to this image for accessibility.'
                )
            )
        );
    };
}, 'addAltTextNotice');

addFilter(
    'editor.BlockEdit',
    'ucla-wordpress/add-alt-text-notice',
    addAltTextNotice
);