<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import 'quasar/src/css/index.sass'
import { funDateformat, numProgress, isSpinner, generateThumbnailFromPDF } from './CCCardDownload'
import { easyDownload } from '@firebaseasy/storage'
import { useQuasar, copyToClipboard } from 'quasar'

//
const $q = useQuasar()
console.log($q)

const props = defineProps({
  data: {
    type: Object,
  },
  isPc: {
    type: Boolean,
    default: true,
  },
})

const thumbnailData = ref<File | null>(null)

const refPDFURL = ref('')

onMounted(async () => {
  if (!props.data) return

  const response = await fetch(props.data.urlDocThumbnail)
  const blob = await response.blob()

  if (blob.type === 'image/svg+xml') {
    const d_Thumbnail = new Blob([blob], { type: 'image/svg+xml' })
    thumbnailData.value = new File([d_Thumbnail], 'fileInfo', {
      type: blob.type,
    })
  } else if (!props.data.urlDocThumbnail && props.data.urlDoc.includes('.pdf')) {
    const response = await fetch(props.data.urlDoc)
    const blob = await response.blob()
    const file = new File([blob], props.data.docName, {
      type: 'application/pdf',
    })

    refPDFURL.value = await generateThumbnailFromPDF(file, funFetDosId.value)
  } else {
    thumbnailData.value = new File([blob], 'fileInfo')
  }
})

const funDownload = async () => {
  if (!props.data?.urlDoc) return
  isSpinner.value = true
  easyDownload(props.data?.urlDoc, props.data.docName, (progress: number) => {
    numProgress.value = progress / 100
    if (progress >= 100) {
      numProgress.value = 0
    }
  })
  isSpinner.value = false
}

/**
 * クリップボードにIdを保存
 */
const funCopyClip = (s: string) => {
  s = s.replace('location.origin', `${location.origin}/`)
  copyToClipboard(s).then(() => {
    $q.notify({
      position: 'top',
      message: `${s}をクリップボードに保存`,
      badgeStyle: 'display: none;',
    })
  })
}

const funFetDosId = computed(() => {
  const _get = props.data as { individualDocId?: string; commonDocId?: string }
  if (_get?.individualDocId) {
    return _get.individualDocId
  }
  if (_get?.commonDocId) {
    return _get.commonDocId
  }

  return ''
})
</script>

<template>
  <q-card class="_card" flat bordered>
    <!-- このdivがないとborder-radiusが効かない -->
    <div>
      <q-card-section class="_card_header">
        <div class="_title">
          <div style="width: 100%">
            <div class="_hidden">
              {{ props.data?.docName }}
            </div>
            <q-tooltip v-if="isPc" anchor="center left" :offset="[10, 10]">
              {{ props.data?.docName }}
            </q-tooltip>
            <div>
              <span class="_update"
                >更新:{{ funDateformat(props.data?.docUpdDate, 'YYYY年MM月DD日') }}</span
              >
            </div>
          </div>
        </div>

        <q-space />

        <q-btn round flat icon="more_vert" class="_menu_btn">
          <q-menu>
            <q-list style="min-width: 100px">
              <q-item clickable v-close-popup @click="funDownload()">
                <q-item-section>ダウンロード</q-item-section>
              </q-item>

              <q-separator />

              <q-item clickable v-close-popup @click="$emit('onEdit')">
                <q-item-section>編集</q-item-section>
              </q-item>

              <div>
                <q-separator />
              </div>

              <q-item clickable v-close-popup @click="$emit('onDelete')">
                <q-item-section>削除</q-item-section>
              </q-item>

              <div>
                <q-separator />
              </div>

              <q-item clickable v-close-popup @click="funCopyClip(props.data?.urlDoc || '')">
                <q-item-section>共有用URL</q-item-section>
              </q-item>

              <div>
                <q-separator />
              </div>

              <q-item clickable v-close-popup>
                <q-item-section>閉じる</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </q-card-section>
    </div>
  </q-card>
</template>

<style lang="sass" scoped>
// $
._card
  height: 300px
  overflow: hidden
  min-width: 200px
  position: relative
  user-select: none

._img
  width: 100%
  height: 300px

._card_header
  position: absolute
  top: 0
  width: 100%
  display: flex
  background: var(--c-primary)
  padding: 10px 10px 10px 10px
  border-radius: none

._title
  color: white
  font-weight: bold
  cursor: pointer
  display: flex
  width: 80%

._hidden
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

._update
  font-size: 12px
  height: 12px
  line-height: 12px

._menu_btn
  background: white
</style>
./CCCardDownload
