<template>
  <v-dialog
    v-model="modelValue"
    content-class="history-content"
    :scrim="false"
  >
    <v-sheet
      class="d-flex flex-column h-100"
      elevation="0"
    >
      <v-toolbar
        class="px-4"
        color="transparent"
      >
        <span class="text-h6">{{ t('labels.recentDicomImages') }}</span>
        <v-spacer />
        <v-btn
          color="primary"
          prepend-icon="auto_awesome"
          variant="text"
        >
          <span>{{ t('labels.generate') }}</span>
        </v-btn>
        <v-btn
          color="primary"
          prepend-icon="cloud_upload"
          variant="text"
        >
          <span>{{ t('labels.addToStorage') }}</span>
        </v-btn>
        <v-btn
          color="primary"
          prepend-icon="filter_list"
          variant="text"
        >
          <span>{{ t('labels.filter') }}</span>
        </v-btn>
        <v-btn
          color="primary"
          prepend-icon="delete"
          variant="text"
        >
          <span>{{ t('labels.delete') }}</span>
        </v-btn>
      </v-toolbar>
      <v-data-table
        class="flex-grow-1"
        height="0"
        :headers="headers"
        :items="items"
        show-select
        sticky
        width="100%"
      >
        <template #[`item.fileName`]="{ item }">
          <div class="pa-2 d-flex ga-2 align-center">
            <v-img
              :src="item.thumbnail"
              inline
              alt="thumbnail"
              width="64"
              height="64"
            />
            <span class="text-body-1">{{ item.fileName }}</span>
          </div>
        </template>
        <template #[`item.lastUpdated`]="{ item }">
          <div class="d-flex flex-column">
            <span class="text-body-1">{{ item.updatedBy }}</span>
            <span class="text-body-2 font-weight-thin">
              {{
                formatDistance(item.updatedAt, new Date(), { addSuffix: true })
              }}
            </span>
          </div>
        </template>
        <template #[`item.quality`]="{ item }">
          <v-rating
            v-model="item.quality"
            active-color="yellow"
            empty-icon="filled:star_rate"
            color="grey"
            density="compact"
            readonly
          />
        </template>
        <template #[`item.sharedWith`]="{ item }">
          <div class="d-flex">
            <template
              v-for="(user, idx) in item.sharedWith"
              :key="user.email"
            >
              <v-tooltip
                location="bottom"
                open-delay="1000"
              >
                <template #activator="{ props }">
                  <v-avatar
                    v-bind="props"
                    :style="`position: relative; right: ${idx * 16}px`"
                    variant="elevated"
                    :image="user.avatar"
                  />
                </template>
                <span>{{ user.email }}</span>
              </v-tooltip>
            </template>
          </div>
        </template>
        <template #[`item.role`]="{ item }">
          <share-menu
            v-model="item.role"
            :btn-props="{ disabled: true }"
          />
        </template>
        <template #[`item.actions`]>
          <div class="d-flex ga-2">
            <v-btn
              density="comfortable"
              icon="ios_share"
              variant="text"
            />
            <v-btn
              density="comfortable"
              icon="delete"
              variant="text"
            />
            <v-btn
              density="comfortable"
              icon="more_vert"
              variant="text"
            />
          </div>
        </template>
      </v-data-table>
    </v-sheet>
  </v-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { formatDistance } from 'date-fns';
import { faker } from '@faker-js/faker';
import { useI18n } from 'vue-i18n';
import { SharePermission } from '@3cr/viewer-types-ts';

interface HistoryItem {
  id: string;
  fileName: string;
  thumbnail: string;
  updatedBy: string;
  updatedAt: Date;
  quality: number;
  sharedWith: {
    email: string;
    avatar: string;
  }[];
  role: SharePermission;
}

const { t } = useI18n();

const modelValue = defineModel<boolean>({ default: false });

const items = ref<HistoryItem[]>(
  faker.helpers.multiple(
    () => ({
      id: faker.string.uuid(),
      fileName: faker.system.commonFileName('dcm'),
      thumbnail: faker.image.urlLoremFlickr({ width: 64, height: 64 }),
      quality: faker.number.int({ min: 1, max: 5 }),
      updatedAt: faker.date.past(),
      updatedBy: faker.person.fullName(),
      sharedWith: faker.helpers.multiple(
        () => ({
          email: faker.internet.email(),
          avatar: faker.image.avatarGitHub(),
        }),
        { count: 5 },
      ),
      role: faker.helpers.enumValue(SharePermission),
    }),
    { count: 100 },
  ),
);

const headers = computed(() => [
  { key: 'fileName', title: t('labels.fileName') },
  { key: 'lastUpdated', title: t('labels.lastUpdated') },
  { key: 'quality', title: t('labels.quality') },
  { key: 'sharedWith', title: t('labels.sharedWith') },
  { key: 'role', title: t('labels.role') },
  { key: 'actions', title: t('labels.actions'), sortable: false },
]);
</script>

<style lang="scss">
.history-content {
  width: calc(100vw - 80px) !important;
  height: calc(100vh - 60px) !important;
  margin: 60px 0 0 80px !important;
}
</style>
