import {Jodit} from "jodit-react";
import {IJodit, IViewBased, IViewOptions} from "jodit/types/types";
import {memorizeExec} from "jodit/esm/core/helpers/utils/utils";
import LayoutSVG from "@/libraries/jodit/plugins/layout/layout.svg";

class Layouts {
    public static TWO_COLUMNS = 'Dva sloupce';
    public static THREE_COLUMNS = 'Tři sloupce';

    public static createTwoColsLayout() {
        return `
<div class="WysiwygTwoColumnLayout">
    <div class="WysiwygTwoColumnLayout-column WysiwygTwoColumnLayout-column--left" contenteditable="true" data-content-editable><p>Sloupec 1</p></div>
    <div class="WysiwygTwoColumnLayout-column WysiwygTwoColumnLayout-column--right" contenteditable="true" data-content-editable><p>Sloupec 2</p></div>
</div>`;
    }

    public static createThreeColsLayout() {
        return `
<div class="WysiwygThreeColumnLayout">
    <div class="WysiwygThreeColumnLayout-column WysiwygThreeColumnLayout-column--left" contenteditable="true" data-content-editable><p>Sloupec 1</p></div>
    <div class="WysiwygThreeColumnLayout-column WysiwygThreeColumnLayout-column--center" contenteditable="true" data-content-editable><p>Sloupec 2</p></div>
    <div class="WysiwygThreeColumnLayout-column WysiwygThreeColumnLayout-column--right" contenteditable="true" data-content-editable><p>Sloupec 3</p></div>
</div>`;
    }
}

Jodit.defaultOptions.controls.insertLayout = {
    icon: LayoutSVG,
    tags: ['iframe'],
    tooltip: 'Vložit layout',
    command: 'insertLayoutCommand',
    list: [
        Layouts.TWO_COLUMNS,
        Layouts.THREE_COLUMNS,
    ],
    childTemplate: (e, key, value) => `<span class="${key}">${e.i18n(value)}</span>`,
    exec: (jodit: (IJodit | IViewBased<IViewOptions>), current: any, options: any) => {
        if (!(jodit instanceof Jodit)) {
            return;
        }

        return memorizeExec(jodit, current, options);
    },
};

Jodit.plugins.add('insertLayout', function (editor: Jodit) {
    editor.registerButton({
        name: 'insertLayout',
        group: 'script',
    });

    editor.registerCommand('insertLayoutCommand', (command: any, second: any, third: any) => {
        let layout = "";
        switch (third) {
            case Layouts.TWO_COLUMNS:
                layout = Layouts.createTwoColsLayout();
                break;
            case Layouts.THREE_COLUMNS:
                layout = Layouts.createThreeColsLayout();
                break;
            default:
                return false;
        }

        editor.s.insertHTML(layout);
        return true;
    });
});