<script setup lang="ts">
import { isChatVisible } from "src/stores/dialogue-box";
import DialogueContent from "./dialogue-content.vue";
import { ref } from "vue";
import { useChatApi } from "../composables/chat-api";
import { useChatStore } from "src/stores/message-store";

// 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)
//--------------------------------------------

// Block to handle the incomming and sending of the messages from the user and the ai
const text = ref('');
const { messages } = useChatStore();
const { sendMessage } = useChatApi();
const handleSend = async () => {
  const userMessage = text.value.trim();
  if (!userMessage) return
  text.value = '';

  messages.push({
    text: userMessage,
    sent: true,
    isThinking: false,
  })

  const thinkingMessage = {
    text: "Thinking...",
    sent: false,
    isThinking: true
  }
  messages.push(thinkingMessage)

  try {
    const aiResponse = await sendMessage(userMessage);

    const index = messages.indexOf(thinkingMessage);
    if (index !== -1) {
      messages.splice(index, 1, {
        text: aiResponse.text,
        sent: false,
        isThinking: false,
      })
    }
  }
  catch (error) {
    const index = messages.indexOf(thinkingMessage);
    if (index !== -1) {
      messages.splice(index, 1, {
        text: "Sorry, something went wrong.",
        sent: false,
        isThinking: false,
      });
    }
    throw error;
  }

};
//---------------------------------------------
</script>

<template>
  <q-drawer
    side="right"
    v-model="isChatVisible"
    class="chat-drawer"
    style="box-shadow: -4px 0 12px rgba(0,0,0,0.15);"
    :width="drawerWidth"
  >
    <div
      class="chat-header"
      style="text-align:start; padding: 10px 10px 0px;"
    >AI Assistant</div>
    <div class="line-separator"></div>

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

    <div class="line-separator"></div>
    <q-form
      @submit="handleSend"
      class="chat-footer row"
    >

      <q-input
        v-model="text"
        label="Enter a Message"
        autogrow
        class="col"
        @keydown.enter="handleSend"
        style="margin-left: 8px;"
      />
    </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);
}

.line-separator {
  height: 1px;
  background-color: #ccc;
  margin: 10px 0;
}

.chat-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Header at the top */
.chat-header {
  color: #019547;
  padding: 10px;
  font-weight: bold;
  flex-shrink: 0;
}

/* Scrollable middle */
.chat-body {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  height: 81%;
}
</style>
