import onDrop from "./control/drop.js";
import initScroll from "./control/scroll.js";

import WS from "./ws.js";
import Input from "./input.js";
import Settings from "./settings.js";
import Message from "./message.js";

const Messenger = {

    components: {
        WS,
        Settings,
        Message,
        Input
    },

    setup()
    {
        const person = Vue.ref("");
        const messages = Vue.ref([]);

        Vue.onMounted(() => {

            window.mainApi.on("message", (update) => {

                if (update.person)
                {
                    person.value = update.person;
                    messages.value = update.messages;
                }
                else if (update.name)
                {
                    person.value = update.name;
                }
                else if (update.modifier)
                {
                    messages.value.push(update);
                }
                else if (update.category)
                {
                    search(update.message).content.push(update);
                }
                else if (update.context)
                {
                    search(update.message).context = update.context;
                }
                else if (update.text)
                {
                    search(update.message).content.at(-1).text = update.text;
                    setTimeout(() => {
                        document.getElementById("messenger").dispatchEvent(new CustomEvent('adjust-scroll'))
                    }, 100);
                }

            });

            initScroll("messenger");
            window.mainApi.send("messenger");
        });

        const search = (id) => messages.value.find(m => m.id == id);

        return { person, messages, onDrop };
    },

    template: `
        <Settings />
        <WS />
        <Input :person="person" />

        <div id="messenger"
            @drop="onDrop($event)"
            @dragover.prevent
            @dragenter.prevent
        >

            <Message 
                v-for="message in messages" 
                v-bind="message" 
            />
            
        </div> `
}

export default Messenger;