<script
    setup
    lang="ts"
>
    import DialogueContent from "./dialogue-content.vue";

    import { onMounted, ref } from "vue";
    import { useChatbotStore } from "src/stores/chatbot-store";
    import { useChatbotApi } from "src/modules/chatbot/composables/chatbot-api";

    const chatbot_api = useChatbotApi();
    const chatbot_store = useChatbotStore();

    const text = ref('');
    const is_showing_right_drawer = ref(true);
    const drawer_width = ref(85);

    const handleSend = async () => {
        const message = text.value.trim();
        text.value = '';
        console.log('message: ', message, ', length: ', message.length);
        await chatbot_api.sendMessage(message);
    };

    onMounted(() => {
        chatbot_store.showInstructionsOnce();
    });
</script>

<template>
    <q-drawer
        v-model="is_showing_right_drawer"
        overlay
        persistent
        :width="drawer_width"
        side="right"
        class="column justify-end no-wrap relative-position no-scroll"
    >
        <transition
            enter-active-class="animated fadeInRight"
            leave-active-class="animated fadeOutRight"
            mode="out-in"
            @after-leave="chatbot_store.is_showing_chatbot ? drawer_width = 500 : drawer_width = 85"
        >
            <div
                v-if="chatbot_store.is_showing_chatbot"
                class="col column"
                style="background: rgba(0, 0, 0, 0.7); overflow: hidden; pointer-events: auto;"
            >
                    <q-btn
                        dense
                        icon="las la-chevron-right"
                        text-color="white"
                        color="accent"
                        align="left"
                        size="2em"
                        class="q-mb-sm"
                        @click="chatbot_store.is_showing_chatbot = false"
                    />

                <div class="col q-px-md relative-position">
                    <DialogueContent class="absolute-full" />
                </div>

                <q-form
                    submit="handleSend"
                    class="col-auto row"
                >
                    <q-input
                        v-model="text"
                        borderless
                        :label="$t('chatbot.chat_placeholder')"
                        :autogrow="false"
                        dark
                        label-color="white"
                        class="col q-px-md"
                        style="background: rgba(0, 0, 0, 0.3); pointer-events: all;"
                        @keydown.enter="handleSend"
                    />
                </q-form>
            </div>


            <div
                v-else
                class="row col-auto q-pa-sm self-end"
            >
                <q-btn
                    dense
                    round
                    icon="las la-robot"
                    color="accent"
                    size="2em"
                    class="shadow-5"
                    style="pointer-events: auto;"
                    @click="chatbot_store.is_showing_chatbot = true"
                />
            </div>
        </transition>
    </q-drawer>
</template>

<style scoped>
:deep(.q-drawer) {
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    pointer-events: none;
}
</style>