import {render} from '@wordpress/element';
import {__, setLocaleData} from '@wordpress/i18n';

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);
}

async function load(editor) {
    const response = await fetch('/static/es.json');
    const result = await response.json();
    const localeData = result.locale_data.messages;
    localeData[""].domain = "default";
    setLocaleData(localeData, 'default');
    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
    );
}

load(editor);