// retoor <retoor@molodetz.nl>

import { TextInput } from "./TextInput.js";
import { DomUtils } from "./DomUtils.js";
import { EmojiPickerElement } from "./EmojiPickerElement.js";

export class EmojiPicker {
    constructor(textarea) {
        this.textarea = textarea;
        this.picker = null;
        this.wrapper = null;
        this.build();
    }

    build() {
        this.wrapper = document.createElement("div");
        this.wrapper.className = "emoji-picker-wrapper";
        this.wrapper.style.display = "none";
        this.wrapper.style.position = "absolute";
        this.wrapper.style.bottom = "100%";
        this.wrapper.style.right = "0";
        this.wrapper.style.zIndex = "2000";

        const picker = EmojiPickerElement.create((unicode) => {
            this.insert(unicode);
            this.hide();
        });
        picker.style.width = "320px";
        picker.style.height = "350px";
        this.wrapper.appendChild(picker);

        this.picker = picker;

        const parent = this.textarea.parentElement;
        if (parent) {
            parent.style.position = "relative";
            parent.appendChild(this.wrapper);
        }
    }

    insert(unicode) {
        TextInput.insertAtCursor(this.textarea, unicode);
    }

    toggle() {
        EmojiPickerElement.load();
        DomUtils.toggle(this.wrapper);
    }

    hide() {
        DomUtils.hide(this.wrapper);
    }
}
window.EmojiPicker = EmojiPicker;
