import {Jodit} from "jodit-react";
import {UIForm, UIBlock, UIInput, UITextArea, Button} from "jodit/esm/core/ui";
import {TabsWidget} from "jodit/esm/modules/widget";
import GoogleForm from "@/libraries/jodit/plugins/google-components/GoogleForm";
import GoogleCalendar from "@/libraries/jodit/plugins/google-components/GoogleCalendar";
import GoogleLogoSVG from "@/libraries/jodit/plugins/google-components/google-logo.svg";
import GoogleFormSVG from "@/libraries/jodit/plugins/google-components/google-form.svg";
import GoogleCalendarSVG from "@/libraries/jodit/plugins/google-components/google-calendar.svg";

Jodit.defaultOptions.controls.insertGoogleComponent = {
    icon: GoogleLogoSVG,
    tags: ['iframe'],
    tooltip: 'Vložit Google komponentu',
    popup: (editor, current, close) => {
        if (!(editor instanceof Jodit)) {
            return document.createElement("div");
        }

        const formGoogleForm = new UIForm(editor, [
            new UIBlock(editor, [
                new UITextArea(editor, {
                    name: 'url',
                    required: true,
                    label: 'URL',
                    placeholder: 'https://',
                    validators: ['url']
                }),
            ]),
            new UIBlock(editor, [
                new UIInput(editor, {
                    name: 'height',
                    type: "number",
                    required: true,
                    label: 'Výška (px)',
                    placeholder: '300',
                    value: GoogleForm.defaultHeight,
                }),
                new UIInput(editor, {
                    name: 'width',
                    type: "number",
                    required: true,
                    label: 'Šířka (px)',
                    placeholder: '400',
                    value: GoogleForm.defaultWidth,
                }),
            ]),
            new UIBlock(editor, [
                Button(editor, '', 'Insert', 'primary').onAction(() => formGoogleForm.submit()),
            ]),
        ]);

        const formGoogleCalendar = new UIForm(editor, [
            new UIBlock(editor, [
                new UITextArea(editor, {
                    name: 'url',
                    required: true,
                    label: 'URL',
                    placeholder: 'https://',
                    validators: ['url']
                }),
            ]),
            new UIBlock(editor, [
                new UIInput(editor, {
                    name: 'height',
                    type: "number",
                    required: true,
                    label: 'Výška (px)',
                    placeholder: '300',
                    value: GoogleCalendar.defaultHeight,
                }),
                new UIInput(editor, {
                    name: 'width',
                    type: "number",
                    required: true,
                    label: 'Šířka (px)',
                    placeholder: '400',
                    value: GoogleCalendar.defaultWidth,
                }),
            ]),
            new UIBlock(editor, [
                Button(editor, '', 'Insert', 'primary').onAction(() => formGoogleCalendar.submit()),
            ]),
        ]);

        const tabs = [];
        const insertCode = (code: string): void => {
            // @ts-ignore
            editor.s.restore();
            // @ts-ignore
            editor.s.insertHTML(code);
            close();
        };

        // @ts-ignore
        editor.s.save();
        tabs.push({
            icon: GoogleFormSVG,
            name: 'Formulář',
            content: formGoogleForm.container
        }, {
            icon: GoogleCalendarSVG,
            name: 'Kalendář',
            content: formGoogleCalendar.container
        });

        formGoogleForm.onSubmit(data => {
            const form = new GoogleForm(data['url'], data['height'], data['width']);
            insertCode(form.render());
        });
        formGoogleCalendar.onSubmit(data => {
            const calendar = new GoogleCalendar(data['url'], data['height'], data['width']);
            insertCode(calendar.render());
        });

        return TabsWidget(editor, tabs);
    },
};

Jodit.plugins.add("insertGoogleComponent", (jodit: Jodit) => {
    jodit.registerButton({
        name: 'insertGoogleComponent',
        group: "script",
    });
});