<script setup>
const props = defineProps({
  modelValue: Boolean,
  title: String,
  source: String,
  type: String,
  width: Number,
  height: Number
})

const emit = defineEmits(['update:modelValue'])

const showAttachmentModal = ref(props.modelValue || false)
const mediaControlRef = ref(null)
const closeAttachmentModal = () => {
  if(mediaControlRef.value) {
    mediaControlRef.value.pause()
  }
  showAttachmentModal.value = false
  emit('update:modelValue', false)
}
watch(() => props.modelValue, () => {
  showAttachmentModal.value = props.modelValue

  if(document?.body && showAttachmentModal.value) {
    document.body.addEventListener('keydown', function(e) {
      if (e.key == 'Escape') {
        closeAttachmentModal()
      }
    })
  }
})
</script>

<template>
  <div class="modal" :class="{'active': showAttachmentModal}" :style="{display: showAttachmentModal ? 'block' : 'none'}">
    <div class="modalDialog modalCenter modalFullscreen">
      <div class="modalContent overflow-auto" style="background: transparent;">
        <div class="modalHeader" style="background: rgba(255, 255, 255, 0.8);">
          <h3 class="modalTitle">{{ title ?? '' }}</h3>
          <div class="cursor-pointer" @click="closeAttachmentModal">
            <span class="tf-icon ti ti-x ti-sm me-1"></span>
          </div>
        </div>
        <div class="modalBody d-grid placeItems-center m-0px p-0px av-body" style="height: calc(100vh - 48px); padding: 0 0.25rem;" @click.self="closeAttachmentModal">
          <template v-if="type?.startsWith('video/') && source">
            <video ref="mediaControlRef" controls class="av-media" style="max-height: calc(100vh - 144px); max-width: 100%; width: auto; height: auto; overflow: hidden;">
              <source :src="source" :type="type" />
            </video>
          </template>
          <template v-else-if="type?.startsWith('audio/') && source">
            <audio ref="mediaControlRef" controls class="av-media" style="width: 100%; max-width: 480px; overflow: hidden;">
              <source :src="source" :type="type" />
            </audio>
          </template>
          <template v-else-if="type?.startsWith('image/') && source">
            <!-- responsive image: always fits the viewport (no intrinsic px width/height that overflows on phones) -->
            <embed :type="type" :src="source" class="av-media" style="max-width: 100%; max-height: calc(100vh - 144px); width: auto; height: auto; overflow: hidden;" />
          </template>
          <template v-else-if="type?.includes('/') && type !== 'application/octet-stream' && source">
            <embed :type="type" :src="source" class="av-media" style="width: 100%; height: 100%; max-width: 100%;" />
          </template>
          <!-- Fallback: media with a missing/generic mime (e.g. uploads without a
               file extension → name like "1917_image." and mime octet-stream or
               empty) matched no branch above, so the modal opened EMPTY even
               though the thumbnail <img> rendered fine. A plain <img> ignores the
               served content-type and sniffs the actual image data. -->
          <template v-else-if="source">
            <img :src="source" :alt="title ?? ''" class="av-media" style="max-width: 100%; max-height: calc(100vh - 144px); width: auto; height: auto; overflow: hidden;" />
          </template>
        </div>
        <!--<div class="modalFooter">
          <div></div>
          <div class="d-flex gap-10px">
            <button type="button" class="button" @click="closeAttachmentModal">Close</button>
          </div>
        </div>-->
      </div>
    </div>
  </div>
</template>