import {render} from '@wordpress/element';

import './style.scss';
import IsolatedBlockEditor, {ToolbarSlot} from '@automattic/isolated-block-editor';
import {Button} from '@wordpress/components';


const settings = {
    iso: {
        sidebar: {
            inspector: true,
            inserter: true,
        },
        toolbar: {
            inspector: true,
            navigation: true,
        },
        moreMenu: {
            editor: true,
            preview: true,
        },
    },
};

const textarea = document.getElementById('content');
textarea.style.display = 'none';
const editor = document.createElement('div');
editor.classList.add('editor');
document.body.appendChild(editor);

function onLoad(content, parser, rawHandler) {
    // Does the content contain blocks?
    if (content.indexOf('<!--') !== -1) {
        // Parse the blocks
        return parser(content);
    }

    // Raw HTML - do our best
    return rawHandler({HTML: content});
}

function saveBlocks(content, textarea) {
    textarea.value = content;
}

function save() {
    const requestOptions = {
        method: 'PUT',
        headers: {'Content-Type': 'text/html'},
        body: textarea.value,
    };
    fetch('/edit', requestOptions);
}

render(
    <IsolatedBlockEditor
        settings={settings}
        onLoad={(parser, rawHandler) => onLoad(textarea.value, parser, rawHandler)}
        onSaveContent={(content) => saveBlocks(content, textarea)}
        onError={() => document.location.reload()}
    >
        <ToolbarSlot>
            <Button onClick={save} variant="primary">Beep!</Button>
        </ToolbarSlot>
    </IsolatedBlockEditor>,
    editor
);