<script setup lang="ts">
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useSupportStore } from "@/modules/00_support/store/Main";
import { useCounterMixin } from "@/stores/mixin";
import ChatMessage from "@/modules/00_support/components/ChatMessage.vue";

const store = useSupportStore();
const content = ref<string>("");
const { date2Thai } = useCounterMixin();
const { scrollContainer } = storeToRefs(store);

function getOnlineStatus(option: "icon" | "status") {
  const isAdmin = store.userStatus.some((u: any) => u.role.includes("admin"));
  if (option === "icon") return isAdmin ? "green" : "grey";
  if (option === "status") return isAdmin ? "ออนไลน์" : "ออฟไลน์";
}

const thaiOptions: Intl.DateTimeFormatOptions = {
  hour: "2-digit",
  minute: "2-digit",
};
</script>

<template>
  <div
    class="row q-py-md q-px-lg justify-between items-center"
    v-if="store.currentTitle && store.currentTitle.length > 0"
    style="flex-wrap: nowrap"
  >
    <div class="row items-center" style="flex-wrap: nowrap">
      <q-btn
        flat
        padding="none"
        class="q-mr-md"
        icon="mdi-chevron-left"
        @click="store.openChat = false"
        v-if="!$q.screen.gt.xs"
      />
      <div style="border-radius: 50%; border: 1px solid teal">
        <q-avatar color="teal-1" text-color="white" size="40px">
          <q-icon :name="store.icon" size="24px" color="teal" />
        </q-avatar>
      </div>
      <div class="column q-ml-md">
        <span class="text-weight-bold ellipsis-2-lines">
          {{ store.currentTitle }}
        </span>
        <span>
          <q-icon
            name="mdi-circle"
            size="10px"
            :color="getOnlineStatus('icon')"
          />
          {{ getOnlineStatus("status") }}
        </span>
      </div>
    </div>

    <div class="col-2 text-right q-gutter-x-md">
      <!-- <q-icon class="col" name="mdi-video-outline" size="24px" color="teal" /> -->
      <q-icon
        class="col"
        name="mdi-information-outline"
        size="24px"
        color="grey"
      >
        <q-tooltip class="column">
          <span>{{ store.currentTitle }}</span>
          <span>
            {{ date2Thai(store.currentIssueDate) }}
            {{
              new Date(store.currentIssueDate).toLocaleTimeString(
                "th-TH",
                thaiOptions
              )
            }}
            น. <q-space />
          </span>
        </q-tooltip>
      </q-icon>
    </div>
  </div>
  <q-separator />

  <q-scroll-area
    style="background-color: #f5f4f4"
    ref="scrollContainer"
    :style="{
      height: $q.screen.gt.md ? '600px' : '450px',
    }"
  >
    <div class="q-px-xl row col-12 justify-between">
      <chat-message />
    </div>
  </q-scroll-area>

  <q-separator />
  <div
    class="row q-py-md q-px-lg justify-between items-center q-gutter-x-lg"
    style="flex-wrap: nowrap"
  >
    <!-- <div>
      <q-btn flat disable class="col-1">
        <q-icon
          name="mdi-paperclip"
          size="20px"
          style="transform: rotate(-125deg)"
          color="grey"
        />
      </q-btn>
    </div> -->

    <div class="col-grow">
      <q-input
        @keydown.enter.prevent="
          () => {
            if (store.currentIssue) {
              store.sendMessage(content, store.currentIssue);
              content = '';
            }
          }
        "
        outlined
        dense
        placeholder="Aa"
        v-model="content"
        id="message"
      >
      </q-input>
    </div>

    <div>
      <q-btn
        @click="
          () => {
            if (store.currentIssue) {
              store.sendMessage(content, store.currentIssue);
              content = '';
            }
          }
        "
        flat
        class="col-2"
        style="color: #009789"
      >
        <span v-if="$q.screen.gt.xs">ส่งข้อความ</span>
        <q-icon v-else name="mdi-send" size="xs" color="primary" />
      </q-btn>
    </div>
  </div>
</template>
