/* Essentials YOOtheme Pro 2.2.16 build 0813.1608; ZOOlanders https://www.zoolanders.com; Copyright (C) Joolanders, SL; http://www.gnu.org/licenses/gpl.html GNU/GPL */

import { WidgetType } from '@codemirror/view';
import { $, addClass, on, removeClass } from 'uikit-util';
// import { composed, widgetHoverIn, widgetHoverOut } from './state';

export default class PlaceholderWidgetType extends WidgetType {
    constructor({ range }) {
        super();

        this.range = range;
        this.events = [];
    }
    ignoreEvent(e) {
        if (e.type === 'dragstart') {
            e.dataTransfer.dropEffect = 'move';
            e.dataTransfer.effectAllowed = 'move';
            return false;
        }

        return true;
    }
    createWrapperDom(view) {
        // keep view ref
        this.view = view;

        const btn = $(
            '<button draggable="true" class="uk-text-nowrap uk-button ye-button-composable"/>'
        );

        // this.events.push(
        //     on(btn, 'mouseenter', (e) => {
        //         view.dispatch({
        //             effects: widgetHoverIn.of(this),
        //         });
        //     })
        // );

        // this.events.push(
        //     on(btn, 'mouseleave', (e) => {
        //         view.dispatch({
        //             effects: widgetHoverOut.of(this),
        //         });
        //     })
        // );

        this.events.push(
            on(btn, 'click', (e) => {
                this.focus();
            })
        );

        // this.events.push(
        //     on(btn, 'keydown', (e) => {
        //         if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
        //             e.preventDefault();

        //             view.dispatch({
        //                 effects: setActiveWidget.of(null),
        //                 selection:
        //                     e.key === 'ArrowRight'
        //                         ? { anchor: this.range.to }
        //                         : { anchor: this.range.from },
        //             });

        //             this.blur();
        //             view.focus();
        //         }
        //     })
        // );

        this.events.push(
            on(btn, 'keydown', (e) => {
                e.preventDefault();

                if (e.key === 'Backspace') {
                    this.remove();
                }
            })
        );

        return btn;
    }
    eq() {
        // do not reuse widget
        return false;
    }
    updateDOM() {
        // do not reuse widget
        return false;
    }
    focus() {
        addClass(this.dom, 'uk-active');
    }
    blur() {
        removeClass(this.dom, 'uk-active');
    }
    remove() {}
    destroy() {}
}
