<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";

    // Block to enable editing the width of the drawer
    // const drawerWidth = ref(370);
    // let dragging = false;
    // const startDrag = (e: MouseEvent) => {
    //     dragging = true
    //     e.preventDefault()
    // }

    // const onDrag = (e: MouseEvent) => {
    //     if (!dragging) return
    //     // calculate new width
    //     const newWidth = window.innerWidth - e.clientX
    //     drawerWidth.value = Math.max(350, Math.min(1000, newWidth)) // min/max width
    // }
    // const stopDrag = () => {
    //     dragging = false
    // }
    // window.addEventListener('mousemove', onDrag)
    // window.addEventListener('mouseup', stopDrag)

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

    const text = ref('');

    const handleSend = async () => {
        await chatbot_api.sendMessage(text.value.trim());
        text.value = '';
    };

    // Capture and send page context to n8n
    // const currentContext = computed(() =>
    //     pageContexts.find(ctx => ctx.path === route.fullPath.replace('/', ''))
    // )

    // // Function that sends the page context to n8n
    // watch([currentContext, userEmail, userRole], async ([ctx, email, role]) => {
    //     if (!ctx || !email || !role) return;

    //     const contextPayload: contextObject = {
    //         name: ctx.name,
    //         description: ctx.description,
    //         features: ctx.features,
    //         path: ctx.path
    //     }

    //     try {
    //         await Promise.all([chatbotService.sendUserCredentials(email, role),
    //         sendPageContext(contextPayload),
    //         ]);
    //         is_session_ready.value = true;
    //     } catch (err) {
    //         console.error("Error", err)
    //     }
    // },
    //     { immediate: true }
    // );

    onMounted(() => {
        chatbot_store.showInstructionsOnce();
    })

    // const custId = ref('')
    // const handleCustomerId = async () => {
    //   const cId = custId.value;
    //   custId.value = '';
    //   await chatbotService.retrieveCustomerDiagnostics(cId);
    // }
</script>

<template>
    <q-drawer
        side="right"
        v-model="chatbot_store.is_showing_chatbot"
        class="column justify-end"
    >
        <div class="bg-primary text-uppercase">{{ $t('chatbot.chat_header') }}</div>
        <div class="line-separator"></div>

        <div class="chat-body">
            <DialogueContent />
        </div>

        <div class="line-separator"></div>
        <q-form
            submit="handleSend"
            class="chat-footer row"
        >
            <q-input
                v-model="text"
                :label="$t('chatbot.chat_placeholder')"
                :autogrow="false"
                class="col"
                style="margin-left: 8px;"
                @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>
.drag-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0);
}
</style> -->
