<template>
  <v-card
    color="background"
    flat
    tile
  >
    <DrawerTitle :title="t('labels.measurements')" />
    <v-card-text class="d-flex flex-column px-2 pb-4 pt-2">
      <div class="new-style pb-2">
        <v-text-field
          v-model="search"
          density="compact"
          prepend-inner-icon="search"
          :placeholder="t('fields.search.placeholder')"
          variant="outlined"
          hide-details
        >
          <template #append-inner>
            <v-btn
              variant="text"
              color="rgba(146, 147, 158, 1)"
              size=""
              icon="close"
              @click="search = ''"
            />
          </template>
        </v-text-field>
      </div>
      <v-sheet
        class="overflow-auto"
        elevation="2"
      >
        <v-data-table-virtual
          v-model:expanded="expanded"
          :custom-filter="filter"
          density="compact"
          :headers="headers"
          hide-default-header
          :items="items"
          item-value="Id"
          must-sort
          :search="search"
          :sort-by="sortBy"
          :no-data-text="t('labels.noResults')"
        >
          <template
            #[`item.expand`]="{ internalItem, isExpanded, toggleExpand }"
          >
            <v-btn
              variant="text"
              size="24"
              :icon="isExpanded(internalItem) ? '$expand' : 'chevron_forward'"
              @click="toggleExpand(internalItem)"
              color="shark_400"
            />
          </template>
          <template #[`item.title`]="{ item }">
            <div class="d-flex align-center">
              <measurement-icon
                :measurement="item"
                class="ml-1"
              />
              <span class="ml-2 text-truncate text-caption">{{
                item.Title
              }}</span>
            </div>
          </template>
          <template #[`item.actions`]="{ item }">
            <div>
              <measurement-menu :measurement="item" />
            </div>
          </template>
          <template #[`item.visibility`]="{ isExpanded, internalItem }">
            <measurement-visibility-btn
              v-if="isExpanded(internalItem)"
              :measurement="internalItem.raw"
              color="shark_400"
            />
          </template>
          <template #expanded-row="{ columns, item }">
            <tr>
              <td
                class="px-0"
                :colspan="columns.length"
              >
                <measurement-info
                  :measurement="item"
                  :is-modal="false"
                />
              </td>
            </tr>
          </template>
        </v-data-table-virtual>
      </v-sheet>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { DataOverlayMeasurement } from '@3cr/viewer-types-ts';

interface Props {
  items: DataOverlayMeasurement[];
}

withDefaults(defineProps<Props>(), {
  items: () => [],
});

const { t } = useI18n();

const search = ref<string>('');
const expanded = ref<string[]>([]);
const sortBy = ref([
  {
    key: 'title',
    order: 'asc' as 'asc' | 'desc',
  },
]);

const headers = ref([
  {
    key: 'expand',
    width: '24px',
    sortable: false,
    cellProps: (data: any) => ({
      class: ['px-0', 'pl-1', { 'bg-minsk_100': isExpanded(data.item.Id) }],
    }),
  },

  {
    key: 'title',
    sortable: true,
    cellProps: (data: any) => ({
      class: ['px-1', 'overflow', { 'bg-minsk_100': isExpanded(data.item.Id) }],
    }),
    sortRaw: (a: DataOverlayMeasurement, b: DataOverlayMeasurement) => {
      return a.Title.localeCompare(b.Title);
    },
  },
  {
    key: 'visibility',
    width: '24px',
    sortable: false,
    cellProps: (data: any) => ({
      class: ['px-0', { 'bg-minsk_100': isExpanded(data.item.Id) }],
    }),
  },
  {
    key: 'actions',
    width: '24px',
    sortable: false,
    cellProps: (data: any) => ({
      class: ['px-0', 'pr-1', { 'bg-minsk_100': isExpanded(data.item.Id) }],
    }),
  },
]);

function isExpanded(id: string): boolean {
  return expanded.value.includes(id);
}

function filter(value: string, query: string, item?: any): boolean {
  const measurement = item.raw as DataOverlayMeasurement;
  return measurement.Title.toLowerCase().includes(query.toLowerCase());
}

defineExpose({
  search,
  expanded,
  filter,
});
</script>

<style scoped lang="scss">
.v-data-table {
  height: 100%;
  width: 100%;
}

:deep(.overflow) {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
