<template>
  <div v-bind="{ ...$attrs }" class="send-attachments">
    <v-btn
      v-if="showBackButton"
      class="back-button clickable"
      icon="arrow_back"
      size="default"
      elevation="0"
      @click.stop="close"
      :disabled="backButtonDisabled"
      variant="flat"
    ></v-btn>

    <div class="title">{{ title }}</div>

    <!-- ATTACHMENT SELECTION MODE -->
    <template v-if="status == mainStatuses.SELECTING">
      <div
        :class="{ 'send-attachments__selecting__current-item': true, 'drop-target': dropTarget }"
        @drop.prevent="filesDropped"
        @dragover.prevent="dropTarget = true"
        @dragleave.prevent="dropTarget = false"
        @dragenter.prevent="dropTarget = true"
      >
        <div v-if="currentAttachment && currentAttachment.status === 'loading'" class="filename">
          <div>{{ currentAttachment.file.name }}</div>
          <div style="font-size: 0.7em; opacity: 0.7">
            {{ $t("message.preparing_to_upload") }}
            <v-progress-linear indeterminate class="mb-0"></v-progress-linear>
          </div>
        </div>
        <ThumbnailView v-else :file="currentAttachment" />
      </div>
      <div class="file-drop-thumbnail-container">
        <v-tooltip location="top" v-for="(attachment, index) in batch.attachments" :key="index">
          <template v-slot:activator="{ props }">
            <v-badge :model-value="batch.isTooLarge(attachment)" color="error">
              <template v-slot:badge><span v-bind="props">&nbsp;</span></template>
              <div
                :class="{ 'file-drop-thumbnail': true, clickable: true, current: index == currentItemIndex }"
                @click="
                  () => {
                    currentItemIndex = index;
                  }
                "
              >
                <v-img v-if="attachment && attachment.src" :src="attachment.src" />
                <div
                  v-if="currentItemIndex == index"
                  class="remove clickable"
                  @click.stop="batch.removeAttachment(attachment)"
                >
                  <v-icon>$vuetify.icons.ic_trash</v-icon>
                </div>
              </div>
            </v-badge>
          </template>
          <span>{{ $t("message.upload_file_too_large") }}</span>
        </v-tooltip>
        <div class="file-drop-thumbnail noborder">
          <div class="add clickable" @click.stop="$emit('pick-file')">+</div>
        </div>
      </div>
      <div class="file-drop-input-container">
        <div class="file-drop-input-container__input">
          <v-text-field
            ref="input"
            full-width
            variant="solo"
            flat
            v-model="messageInput"
            no-resize
            class="input-area-text"
            rows="1"
            :placeholder="$t('file_mode.add_a_message')"
            hide-details
            color="white"
            background-color="transparent"
          />
          <v-btn
            class="send-button clickable"
            icon="arrow_upward"
            size="default"
            elevation="0"
            color="black"
            @click.stop="sendAll"
            :disabled="sendButtonDisabled"
          ></v-btn>
        </div>
        <v-btn
          class="info-button clickable"
          icon="$vuetify.icons.ic_share_settings"
          size="default"
          elevation="0"
          color="black"
          @click.stop="showInformation"
        ></v-btn>
      </div>
    </template>

    <!-- ATTACHMENT SENDING/SENT MODE -->
    <template v-if="batch.attachments.length > 0 && (status == mainStatuses.SENDING || status == mainStatuses.SENT)">
      <div class="file-drop-sent-stack" ref="stackContainer">
        <div v-if="status == mainStatuses.SENDING && batch.attachmentsSentCount == 0" class="no-items">
          <div class="file-drop-stack-item direct" :style="stackItemTransform(null, -1)"></div>
          <div>{{ $t("file_mode.sending_progress") }}</div>
        </div>
        <div
          v-else
          v-for="(info, index) in batch.attachmentsSent"
          :key="info.file.name"
          class="file-drop-stack-item animated"
          :style="stackItemTransform(info, index)"
        >
          <v-img v-if="info.src" :src="info.src" />
        </div>
        <div v-if="status == mainStatuses.SENT" class="items-sent" :style="stackItemTransform(null, -1)">
          <v-icon>$vuetify.icons.ic_check_circle</v-icon>
        </div>
      </div>

      <!-- Middle section -->
      <div v-if="status == mainStatuses.SENDING" class="file-drop-sending-container">
        <div class="file-drop-sending-item" v-for="attachment in batch.attachmentsSending" :key="attachment.file.name">
          <v-img v-if="attachment.src" :src="attachment.src" />
          <div v-else class="filename">{{ attachment.file.name }}</div>
          <v-progress-linear :model-value="attachment.sendInfo?.progress ?? 0"></v-progress-linear>
          <div class="file-drop-cancel clickable" @click.stop="batch.cancelSendAttachment(attachment)">
            <v-icon size="14" color="white">close</v-icon>
          </div>
        </div>
      </div>
      <div v-else-if="status == mainStatuses.SENT" class="file-drop-sending-container">
        <div class="file-drop-files-sent">
          {{
            $t(
              messageInput && messageInput.length > 0 ? "file_mode.files_sent_with_note" : "file_mode.files_sent",
              batch.attachmentsSent.length
            )
          }}
        </div>
        <div class="file-drop-section">
          <v-textarea
            disabled
            full-width
            variant="solo"
            flat
            v-model="messageInput"
            no-resize
            class="input-area-text"
            rows="1"
            hide-details
            background-color="transparent"
          />
        </div>
      </div>

      <!-- Bottom section -->
      <div v-if="status == mainStatuses.SENDING" class="file-drop-sending-input-container">
        <v-textarea
          disabled
          full-width
          variant="solo"
          flat
          auto-grow
          v-model="messageInput"
          no-resize
          class="input-area-text"
          rows="1"
          :placeholder="$t('file_mode.add_a_message')"
          hide-details
          background-color="transparent"
        />
        <v-btn
          >{{ $t("file_mode.sending")
          }}<v-progress-circular indeterminate size="18" width="2" color="#4642F1"></v-progress-circular
        ></v-btn>
      </div>
      <div v-else-if="status == mainStatuses.SENT" class="file-drop-sent-input-container">
        <v-btn class="close" @click.stop="close">{{ $t("file_mode.close") }}</v-btn>
      </div>
    </template>

    <v-bottom-sheet v-model="showAttachmentInformation" 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="showAttachmentInformation = false">{{ $t("menu.done") }}</div>
          <v-divider />
        </v-card-title>
        <v-card-title class="d-flex">
          <v-btn
            class="left-right-arrow flex-0-0"
            icon="chevron_left"
            @click.stop="currentItemIndex -= 1"
            :disabled="currentItemIndex == 0"
          ></v-btn>
          <div class="title flex-fill">{{ currentAttachment.file.name }}</div>
          <v-btn
            class="left-right-arrow flex-0-0"
            icon="chevron_right"
            @click.stop="currentItemIndex += 1"
            :disabled="currentItemIndex >= batch.attachments.length - 1"
          ></v-btn>
        </v-card-title>
        <v-card-text>
          <AttachmentInfo :attachment="currentAttachment" />
        </v-card-text>
      </v-card>
    </v-bottom-sheet>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import messageMixin from "../messages/messageMixin";
import { Attachment } from "../../models/attachment";
import C2PABadge from "../c2pa/C2PABadge.vue";
import { createUploadBatch } from "../../models/attachmentManager";
import AttachmentInfo from "./AttachmentInfo.vue";
import ThumbnailView from "./ThumbnailView.vue";

export default defineComponent({
  mixins: [messageMixin],
  components: { C2PABadge, AttachmentInfo, ThumbnailView },
  emits: ["pick-file", "close"],
  props: {
    defaultRootMessageText: {
      type: String,
      default: function () {
        return "";
      },
    },

    showBackButton: {
      type: Boolean,
      default: function () {
        return true;
      },
    },

    title: {
      type: String,
      default: function () {
        return "";
      },
    },

    batch: {
      type: Object,
      default: function () {
        return reactive(createUploadBatch(null, null, 0));
      },
    },
  },
  data() {
    return {
      currentItemIndex: 0,
      messageInput: "",
      mainStatuses: Object.freeze({
        SELECTING: 0,
        SENDING: 1,
        SENT: 2,
      }),
      status: 0,
      dropTarget: false,
      showAttachmentInformation: false,
    };
  },
  mounted() {
    this.$audioPlayer.setAutoplay(false);
  },
  computed: {
    backButtonDisabled() {
      return this.status == this.mainStatuses.SENDING;
    },
    sendButtonDisabled() {
      return !this.batch.canSend;
    },
    currentAttachment(): Attachment | undefined {
      if (this.currentItemIndex >= 0 && this.currentItemIndex < this.batch.attachments.length) {
        return this.batch.attachments[this.currentItemIndex];
      }
      return undefined;
    },
  },
  watch: {
    "batch.attachments": {
      handler(newValue, oldValue) {
        // Added or removed?
        if (newValue && oldValue && newValue.length > oldValue.length) {
          this.currentItemIndex = oldValue.length;
        } else if (newValue) {
          this.currentItemIndex = newValue.length - 1;
        }
      },
      deep: true,
    },
  },
  methods: {
    showInformation() {
      if (this.currentAttachment) {
        this.showAttachmentInformation = true;
      }
    },
    filesDropped(e: DragEvent) {
      this.dropTarget = false;
      let droppedFiles: FileList | undefined = e.dataTransfer?.files;
      if (!droppedFiles) return;
      for (let i = 0; i < droppedFiles.length; i++) {
        const file = droppedFiles.item(i);
        this.batch.addAttachment(this.$matrix.attachmentManager.createAttachment(file));
      }
    },
    close() {
      this.batch.cancel();
      this.status = this.mainStatuses.SELECTING;
      this.messageInput = "";
      this.currentItemIndex = 0;
      this.$emit("close");
    },
    sendAll() {
      this.status = this.mainStatuses.SENDING;
      this.batch
        .send(this.messageInput && this.messageInput.length > 0 ? this.messageInput : this.defaultRootMessageText)
        .then(() => {
          this.status = this.mainStatuses.SENT;
        });
    },
    stackItemTransform(attachment: Attachment, index: number) {
      const size =
        0.6 *
        (this.$refs.stackContainer
          ? Math.min(this.$refs.stackContainer.clientWidth, this.$refs.stackContainer.clientHeight)
          : 176);
      let transform = "";
      if (attachment != null && attachment.sendInfo && index != -1) {
        transform =
          "transform: rotate(" +
          attachment.sendInfo.randomRotation +
          "deg) translate(" +
          attachment.sendInfo.randomTranslationX +
          "px," +
          attachment.sendInfo.randomTranslationY +
          "px); z-index:" +
          (index + 2) +
          ";";
      }
      return transform + "width:" + size + "px;height:" + size + "px;border-radius:" + size / 8 + "px";
    },
  },
});
</script>

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