<template>
  <v-sheet
    elevation="1"
    rounded="0"
    class="fill-height d-flex flex-column"
    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
  >
    <div style="border-bottom: 1px solid #e0e0e0" class="px-4 pt-4 pb-2 mb-2">
      <h3 class="text-h6">
        {{ type === "workOrder" ? "Work Order" : "Feedback" }} Chat
      </h3>
    </div>

    <v-sheet
      class="overflow-y-auto flex-grow-1 pa-3"
      :style="{ height: 'calc(100vh - 300px)', overflowX: 'hidden' }"
    >
      <v-row
        v-for="(msg, i) in messages"
        :key="i"
        no-gutters
        :justify="msg.isCurrentUser ? 'end' : 'start'"
        class="mb-2"
      >
        <v-col cols="auto">
          <ChatBubbles
            :isCurrentUser="msg.isCurrentUser"
            :message="msg.message"
            :timestamp="msg.timestamp"
            :seenLabel="msg.seenLabel"
            :senderName="msg.senderName"
            :role="msg.role"
          />
        </v-col>
      </v-row>
    </v-sheet>

    <v-card class="mx-4 mb-4 mt-2 pa-3 rounded-lg" elevation="2">
      <v-row no-gutters align="end">
        <v-col cols="10">
          <v-textarea
            label="Message"
            auto-grow
            hide-details
            rows="1"
            variant="outlined"
          />
        </v-col>
        <v-col cols="2" class="pl-2">
          <v-btn color="primary-button" block class="pa-4 py-6 text-capitalize"
            >Send</v-btn
          >
        </v-col>
      </v-row>

      <v-divider class="my-2" />

      <v-row justify="start" no-gutters align="center">
        <v-col cols="auto">
          <v-icon size="20" class="mr-3">mdi-paperclip</v-icon>
        </v-col>

        <v-col cols="auto">
          <v-icon size="20" class="mr-3">mdi-emoticon-happy-outline</v-icon>
        </v-col>

        <v-col cols="auto">
          <v-menu location="top" offset="10">
            <template #activator="{ props }">
              <v-btn icon v-bind="props" density="compact" variant="text">
                <v-icon size="20" color="gray">mdi-message-outline</v-icon>
              </v-btn>
            </template>

            <v-card min-width="350" class="rounded-lg">
              <v-card-title class="text-subtitle-1 font-weight-medium pb-1"
                >Quick Chat</v-card-title
              >
              <v-divider class="mb-1" />

              <v-list density="compact">
                <v-list-item
                  v-for="(option, index) in quickChatOptions"
                  :key="index"
                  @click="selectQuickChat(option)"
                >
                  <v-list-item-title>{{ option }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-card>
          </v-menu>
        </v-col>
      </v-row>
    </v-card>
  </v-sheet>
</template>

<script setup lang="ts">
defineProps({
  type: {
    type: String,
    default: "feedback",
  },
});

const messages = [
  {
    isCurrentUser: true,
    message: "Hello we would like to transfer this task...",
    timestamp: "06/28/2024 08:40",
    seenLabel: "Seen",
    senderName: "You",
    role: "Site Personnel",
  },
  {
    isCurrentUser: false,
    message: "Sure. Let me take care of that.",
    timestamp: "06/28/2024 08:42",
    senderName: "Tan Wei",
    role: "Manager",
  },
  {
    isCurrentUser: true,
    message: "Thanks!",
    timestamp: "06/28/2024 08:43",
    seenLabel: "Seen",
    senderName: "You",
    role: "Site Personnel",
  },
  {
    isCurrentUser: false,
    message: "No worries!",
    timestamp: "06/28/2024 08:44",
    senderName: "Tan Wei",
    role: "Manager",
  },
  {
    isCurrentUser: true,
    message: "Let me know if you need anything else.",
    timestamp: "06/28/2024 08:45",
    seenLabel: "Seen",
    senderName: "You",
    role: "Site Personnel",
  },
];

const quickChatOptions = [
  "This is all noted, thank you!",
  "Ok, we are working on it.",
  "Yes, we will do it as soon as possible.",
  "Sorry, we cannot make it this time.",
  "We are here to help.",
];

const selectQuickChat = (msg: string) => {
  console.log("Quick Chat Selected:", msg);
};
</script>
