import EditorJS from '@editorjs/editorjs';

import Header from '@editorjs/header';
import List from '@editorjs/list';
import Table from '@editorjs/table';
import Checklist from '@editorjs/checklist';
import Code from '@editorjs/code';
import Marker from '@editorjs/marker';
import Link from '@editorjs/link';
import Attaches from '@editorjs/attaches';
import Image from '@editorjs/image';

import axios from 'axios';
import qs from 'querystring'

import './styles.css';

function addSaver(editor, saveUrl, page, beforeSave) {
    return {
        save() {
            return editor.save().then(outputData => {
                beforeSave()
                let data = {
                    'json': 1,
                    'p': page,
                    'summary': "JSON test",
                    'content': JSON.stringify(outputData),
                };
                return axios.post(saveUrl, qs.encode(data))
            })
        }
    }
}

function Indicator(element, timeout) {
    let timeoutId;

    return {
        done() {
            timeoutId = setTimeout(() => {
                element.classList.add('hidden')
            }, timeout*1000);
        },

        setText(text) {
            if (timeoutId) {
                clearTimeout(timeoutId);
                timeoutId = null;
            }
            element.innerText = text;
            element.classList.remove('hidden')
        },
    }
}

function addIndicator(editor, indicator) {
    return {
        save() {
            editor.save().then(() => {
                indicator.setText('saved!');
                indicator.done();
            })
        }
    }
}

const editor = new EditorJS({
    holder: 'editor',
    tools: {
        header: {
            class: Header
        },
        list: List,
        table: Table,
        checklist: Checklist,
        code: Code,
        marker: Marker,
        link: {
            class: Link,
            config: {
                endpoint: '/fetchLink'
            }
        },
        attaches: {
            class: Attaches
        },
        image: {
            class: Image
        }
    },
    onChange() {
        let element = document.getElementById('editor');
        let indicator = Indicator(document.getElementById('save-indicator'), 2);
        let saveUrl = element.dataset.saveurl;
        let page = element.dataset.page;

        indicator.setText('has changes...');
        addIndicator(
            addSaver(editor, saveUrl, page, () => indicator.setText('saving...')),
            indicator
        ).save()
    },
    onReady() {
        let data = document.getElementById('editor').dataset.input;
        if (data) {
            editor.blocks.render(JSON.parse(data));
        }
    }
});