<template>
  <div class="fill-screen send-attachments">
    <div class="chat-header">
      <v-container fluid class="d-flex justify-space-between align-center">
        <v-icon @click.stop="$emit('close')" color="white" class="clickable">arrow_back</v-icon>
        <div class="room-name no-upper">{{ displayDate }}</div>
        <div>
          <v-icon @click.stop="showInfo = true" v-if="showInfoButton" color="white" class="header-button clickable"
            >info_outline</v-icon
          >
          <v-icon v-if="items.length > 1" @click.stop="showMoreMenu = true" color="white" class="header-button clickable">more_vert</v-icon>
          <v-icon v-else @click.stop="() => downloadOne()" color="white" class="header-button clickable">$vuetify.icons.ic_download</v-icon>
        </div>
      </v-container>
    </div>

    <div class="gallery-current-item">
      <ThumbnailView :item="currentAttachment" showInlinePDF />
    </div>
    <div class="gallery-thumbnail-container">
      <div
        :class="{ 'file-drop-thumbnail': true, clickable: true, current: currentAttachment == attachment }"
        @click="currentAttachment = attachment"
        v-for="(attachment, index) in items"
        :key="index"
      >
        <v-img
          v-if="attachment"
          :src="attachment.thumbnail ? attachment.thumbnail : attachment.src"
        />
      </div>
    </div>

    <!-- MORE MENU POPUP -->
    <MoreMenuPopup :show="showMoreMenu" :menuItems="moreMenuItems" :showProfile="false" @close="showMoreMenu = false" />
    <v-bottom-sheet v-model="showInfo" theme="dark" height="80%">
      <v-card class="text-center send-attachments-info-popup">
        <v-card-title class="d-flex flex-column pa-0">
          <div class="align-self-end done-button clickable" @click="showInfo = false">{{ $t("menu.done") }}</div>
          <v-divider />
        </v-card-title>
        <v-card-title class="d-flex"> </v-card-title>
        <v-card-text>
          <EventAttachmentInfo :attachment="currentAttachment" />
        </v-card-text>
      </v-card>
    </v-bottom-sheet>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import MoreMenuPopup from "../MoreMenuPopup.vue";
import util from "../../plugins/utils";
import ThumbnailView from "./ThumbnailView.vue";
import { EventAttachment, KeanuEvent } from "../../models/eventAttachment";
import { computed, inject, onBeforeUnmount, onMounted, Ref, ref, watch } from "vue";
import EventAttachmentInfo from "./EventAttachmentInfo.vue";

const { t } = useI18n();
const $matrix: any = inject("globalMatrix");

const props = defineProps<{
  originalEvent: KeanuEvent;
  items: EventAttachment[];
  initialItem: EventAttachment | undefined;
}>();

const currentAttachment: Ref<EventAttachment | undefined> = ref(undefined);
const showMoreMenu: Ref<boolean> = ref(false);
const showInfo: Ref<boolean> = ref(false);

onMounted(() => {
  document.body.classList.add("dark");
  currentAttachment.value = props.initialItem ? props.initialItem : props.items[0];
});

onBeforeUnmount(() => {
  document.body.classList.remove("dark");
});

const displayDate = computed(() => {
  return util.formatRecordStartTime(props.originalEvent.getTs());
});

const showInfoButton = computed(() => {
  return currentAttachment.value?.mediaMetadata !== undefined || currentAttachment.value?.mediaInterventionFlags !== undefined;
});

const moreMenuItems = computed(() => {
  let items = [];
  items.push({
    text: t("message.download_media"),
    handler: () => {
      downloadOne();
    },
  });
  items.push({
    text: t("message.download_all"),
    handler: () => {
      downloadAll();
    },
  });
  return items;
});

watch(props.items, (newValue: EventAttachment[], oldValue: EventAttachment[]) => {
  // Added or removed?
  if (newValue && oldValue && newValue.length > oldValue.length) {
    currentAttachment.value = newValue[oldValue.length];
  } else if (newValue && oldValue && newValue.length < oldValue.length) {
    currentAttachment.value = newValue[newValue.length - 1];
  }
});

const downloadOne = () => {
  if (currentAttachment.value) {
    util.download($matrix.matrixClient, $matrix.useAuthedMedia, currentAttachment.value.event);
  }
};

const downloadAll = () => {
  props.items.forEach((item) => util.download($matrix.matrixClient, $matrix.useAuthedMedia, item.event));
};

</script>

<style lang="scss">
@use "@/assets/css/chat.scss" as *;
@use "@/assets/css/sendattachments.scss" as *;

.chat-header {
  position: relative !important;
  width: 100%;
  flex: 0 0 auto;
}

.header-button {
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-left: 8px;
}

.fill-screen {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  z-index: 20 !important;
  justify-content: space-between !important;
}
</style>
