<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 handleSend = async () => {
        await chatbot_api.sendMessage(text.value.trim());
        text.value = '';
    };

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

<template>
    <q-drawer
        v-model="chatbot_store.is_showing_chatbot"
        overlay
        side="right"
        :width="500"
        class="column justify-end no-wrap"
    >
        <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);"
                @keyup.enter="handleSend"
            />

            <!-- <q-input
                v-model="custId"
                :label="'Customer Id'"
                :autogrow="false"
                class="col"
                style="margin-left: 8px;"
                @keyup.enter="handleCustomerId"
            /> -->
        </q-form>

        <!-- <div
            class="drag-handle"
            @mousedown.prevent="startDrag"
        ></div> -->
    </q-drawer>
</template>

<style scoped>
:deep(.q-drawer) {
    background: rgba(0, 0, 0, 0.3);
}
</style>
