<template>
  <v-sheet
    elevation="1"
    rounded="0"
    class="pa-4 fill-height"
    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
  >
    <h3 class="text-h6 mb-4">{{ title }}</h3>

    <v-text-field
      v-model="search"
      @input="_search"
      label="Search"
      prepend-inner-icon="mdi-magnify"
      density="compact"
      hide-details
      variant="outlined"
      class="mb-4"
    />

    <v-select
      label="Filter by Status"
      :items="['All', 'In Progress', 'To Do', 'Done']"
      v-model="selectedStatus"
      density="compact"
      hide-details
      variant="outlined"
      class="mb-4"
    />

    <v-row dense class="mb-4" align="center">
      <v-col cols="5">
        <v-menu
          v-model="startMenu"
          :close-on-content-click="false"
          transition="scale-transition"
          offset-y
          max-width="280px"
          min-width="auto"
        >
          <template #activator="{ props }">
            <v-text-field
              v-bind="props"
              v-model="startDate"
              label="Start Date"
              density="compact"
              variant="outlined"
              readonly
              hide-details
              prepend-inner-icon="mdi-calendar"
            />
          </template>

          <v-date-picker
            v-model="startDate"
            @update:model-value="startMenu = false"
            show-adjacent-months
            hide-header
            class="d-flex flex-column pa-2"
            style="font-size: 0.85rem; max-height: 300px"
          />
        </v-menu>
      </v-col>

      <v-col cols="2" class="d-flex align-center justify-center">
        <span class="text-subtitle-2">to</span>
      </v-col>

      <v-col cols="5">
        <v-menu
          v-model="endMenu"
          :close-on-content-click="false"
          transition="scale-transition"
          offset-y
          max-width="280px"
          min-width="auto"
        >
          <template #activator="{ props }">
            <v-text-field
              v-bind="props"
              v-model="endDate"
              label="End Date"
              density="compact"
              variant="outlined"
              readonly
              hide-details
              prepend-inner-icon="mdi-calendar"
            />
          </template>

          <v-date-picker
            v-model="endDate"
            @update:model-value="endMenu = false"
            show-adjacent-months
            hide-header
            class="d-flex flex-column pa-2"
            style="font-size: 0.85rem; max-height: 300px"
          />
        </v-menu>
      </v-col>
    </v-row>

    <v-sheet
      class="overflow-y-auto flex-grow-1 pa-3"
      :style="{ height: 'calc(100vh - 320px)', overflowX: 'hidden' }"
    >
      <v-row dense>
        <v-col v-for="(item, index) in items" :key="item._id" cols="12">
          <div class="cursor-pointer" @click="$emit('select', item._id)">
            <ChatListCard
              :image="currentUser?.profile"
              :subject="item.subject"
              :status="item.status"
              :createdAt="
                item.createdAt
                  ? new Date(item.createdAt).toLocaleDateString()
                  : ''
              "
              :createdByName="item.createdByName"
              :userProfile="currentUser?.profile"
              :getNameInitials="getNameInitials"
            />
          </div>
        </v-col>
      </v-row>
    </v-sheet>
  </v-sheet>
</template>

<script setup lang="ts">
defineProps<{
  title: string;
  items: Array<Record<string, any>>;
}>();

const emit = defineEmits(["select", "search"]);

const { currentUser } = useLocalAuth();
const { getNameInitials, search } = useUtils();

const selectedStatus = ref("All");
const startDate = ref(null);
const endDate = ref(null);
const startMenu = ref(false);
const endMenu = ref(false);

function _search() {
  emit("search", search.value);
}
</script>
