<script setup lang="ts">
import { ref, watch, PropType } from 'vue'
import { CCButton, CCMDIcon, CCImageMenuButton } from '../../index'
import { SizeTypes, ColorTypes } from '../../types'

const props = defineProps({
  modelValue: { type: Object as PropType<File | null | undefined> },
  /**
   * ボタンのラベル
   * @example 'ファイルを選択'
   */
  label: { type: String, default: 'ファイルを選択' },
  /**
   * outline
   * @example outline
   */
  outline: { type: Boolean, default: false },
  /**
   * ラウンドデザイン
   * @example rounded
   */
  rounded: { type: Boolean, default: false },
  /**
   * スクエアデザイン
   * @example square
   */
  square: { type: Boolean, default: false },
  /**
   * ボタンのサイズ
   * @example 'xs' | 'XS' | 's' | 'S' | 'm' | 'M' | 'l' | 'L' | 'xl' | 'XL'
   */
  size: { type: String as PropType<SizeTypes>, default: 'xs' },
  /**
   * カラー
   * @example 'primary' | 'secondary' | 'positive' | 'negative' | 'warning'
   */
  color: {
    type: String as PropType<ColorTypes>,
    default: 'secondary',
  },
  /**
   * 画像のURL(表示のみを行う)
   */
  url: { type: String, default: '' },
  /**
   * 画像選択のモーダルが展開するかどうか
   */
  isNotOpen: { type: Boolean, default: false },
  /**
   * アップロード済みの写真かどうか
   * @example uploaded
   */
  uploaded: { type: Boolean, default: true },
})
/** 画像のプレビュー用URL */
const imagePreviewUrl = ref<string | null>(null)
/** 画像のFileオブジェクト */
const imageFileObj = ref<File | null>(null)
/** PDFのプレビュー用URL */
const pdfPreviewUrl = ref<string | null>(null)
/** PDFのFileオブジェクト */
const pdfFileObj = ref<File | null>(null)
/** inputエレメントを参照するためのref */
const fileInput = ref<HTMLInputElement | null>(null)
/** ドラッグしているファイルが範囲内にあるかのフラグ */
const isDragOver = ref(false)
/** 画像拡大時のモーダルフラグ */
const isModalImage = ref(false)
/** PDF拡大時のモーダルフラグ */
const isModalPdf = ref(false)
/** メニューの表示切り替え */
const isMenu = ref(false)

const emit = defineEmits<{
  (e: 'update:modelValue', value: File | null): void
  // 編集ボタン
  (e: 'onSelect'): void
  (e: 'storageToFile', file: File): void
  // 削除ボタン
  (e: 'fileObjDelete'): void
}>()

/** ファイル選択のウィンドウを開く */
const chooseFile = () => {
  if (props.isNotOpen) {
    emit('onSelect')
    return
  }
  if (fileInput.value) {
    fileInput.value.click()
  }
}

watch(
  () => props.url,
  (url) => {
    if (url) {
      imagePreviewUrl.value = url
    }
  },
  { immediate: true }
)

/** 選択されたFileオブジェクトを親コンポーネントに渡す */
const handleFilePreview = (file: File) => {
  if (file.type.startsWith('image/')) {
    // プレビュー用のURLを生成
    imagePreviewUrl.value = URL.createObjectURL(file)
    imageFileObj.value = file
    pdfPreviewUrl.value = null
    pdfFileObj.value = null

    emit('storageToFile', imageFileObj.value as File)
    emit('update:modelValue', imageFileObj.value as File)
  } else if (file.type === 'application/pdf') {
    // プレビュー用のURLを生成
    pdfPreviewUrl.value = URL.createObjectURL(file)
    pdfFileObj.value = file
    imagePreviewUrl.value = null
    imageFileObj.value = null
    emit('storageToFile', pdfFileObj.value as File)
    emit('update:modelValue', pdfFileObj.value as File)
  } else {
    alert('画像ファイルまたはPDFファイルを選択してください。')
  }
}

/** 選択、またはドロップされたデータをFileオブジェクトに変換 */
const onFileChangeAndDrop = (event: Event) => {
  if (event.target instanceof HTMLInputElement) {
    const file = event.target.files?.[0]
    handleFilePreview(file as File)
  }
  if (event instanceof DragEvent) {
    const file = event.dataTransfer?.files[0]
    handleFilePreview(file as File)
  }
}

/** メニューボタンのアクション機能 */
const menuAction = (action: 'download' | 'delete' | 'shareUrl' | 'edit') => {
  console.log(action)
  if (action === 'delete') {
    imagePreviewUrl.value = null
    imageFileObj.value = null
    pdfPreviewUrl.value = null
    pdfFileObj.value = null
    isDragOver.value = false
    emit('fileObjDelete')
  }

  if (action === 'edit') chooseFile()

  isMenu.value = false
}

/** 子コンポーネントからemitで受け取ったFileオブジェクトを関数に渡す */
const fileChange = (file: File) => {
  handleFilePreview(file)
}

/** ドラッグしているファイルが範囲内にある場合の処理 */
const onDragover = () => {
  isDragOver.value = true
}

/** ドラッグしているファイルが範囲外にある場合の処理 */
const onDragleave = () => {
  isDragOver.value = false
}

/** 画像拡大時のモーダルを開く */
const openModal = (modal: string) => {
  modal === 'image' ? (isModalImage.value = true) : (isModalPdf.value = true)
}

/** 画像拡大時のモーダルを閉じる */
const closeModal = (modal: string) => {
  modal === 'image' ? (isModalImage.value = false) : (isModalPdf.value = false)
}
</script>

<template>
  <div v-if="imagePreviewUrl">
    <div class="_preview_container">
      <img :src="imagePreviewUrl" class="_preview_image" @click="openModal('image')" />
      <div class="_menu_button">
        <CCImageMenuButton
          :uploaded="uploaded"
          :color="color"
          opacity
          v-model="isMenu"
          @onClick="menuAction"
          @fileChange="fileChange"
        />
      </div>
    </div>
    <div v-if="isModalImage" class="_modal">
      <div class="_modal_background" @click="closeModal('image')"></div>
      <img :src="imagePreviewUrl" class="_modal_image" />
      <CCMDIcon name="close" @click="closeModal('image')" class="_modal_close" />
    </div>
  </div>
  <div v-else-if="pdfPreviewUrl">
    <div class="_preview_container">
      <div class="_preview_image" @click="openModal('pdf')">
        <div class="_pdf_container">
          <div>{{ pdfFileObj?.name }}</div>
          <img src="/image/pdf-icon.svg" />
        </div>
      </div>
      <div class="_menu_button">
        <CCImageMenuButton
          :uploaded="uploaded"
          :color="color"
          v-model="isMenu"
          opacity
          @onClick="menuAction"
          @fileChange="fileChange"
        />
      </div>
    </div>
    <div v-if="isModalPdf" class="_modal">
      <div class="_modal_background" @click="closeModal('pdf')"></div>
      <embed :src="pdfPreviewUrl" class="_modal_image" width="85%" height="85%" />
      <CCMDIcon name="close" @click="closeModal('pdf')" class="_modal_close" />
    </div>
  </div>
  <div v-else>
    <div
      class="_drop_area"
      :class="{ _drag: isDragOver }"
      @dragover.prevent="onDragover"
      @dragleave="onDragleave"
      @drop.prevent="onFileChangeAndDrop"
    >
      <input
        type="file"
        ref="fileInput"
        style="display: none"
        @change="onFileChangeAndDrop"
        accept="image/*, application/pdf"
      />
      <div>ドラッグ＆ドロップで<br />ファイルをアップロード</div>
      <CCMDIcon name="image_not_supported" class="_image_not_supported" />
      <CCButton
        @click="chooseFile"
        :label="label"
        :size="size"
        :color="color"
        :square="square"
        :rounded="rounded"
        :outline="outline"
        class="_file_select_button"
      />
    </div>
  </div>
</template>

<style lang="sass" scoped>
._drop_area
  border: 1px solid #707070
  background: #ECECEC
  color: #333333
  font-size: 14px
  padding: 15px 0
  text-align: center
  width: 260px
  height: 175px
  display: grid
  grid-template-rows: repeat(3, min-content)
  row-gap: 15px
  justify-content: center
  box-sizing: border-box
._drag
  border: 1px dashed #707070
._preview_image
  width: 100%
  height: 100%
  background: #ECECEC
  object-fit: contain
  cursor: zoom-in
._pdf_container
  box-sizing: border-box
  width: 260px
  height: 175px
  padding: 20px 15px
  text-align: center
  display: flex
  flex-direction: column
  justify-content: space-between
  position: relative
._pdf_container img
  height: 100px
._pdf_container div
  font-size: 14px
  color: #333333
  text-overflow: ellipsis
  white-space: nowrap
  overflow: hidden
._image_not_supported
  color: #707070
  font-size: 35px
._file_select_button
  font-size: 14px
  width: 150px
._preview_container
  position: relative
  width: 260px
  height: 175px
._menu_button
  position: absolute
  bottom: 10px
  right: 10px
._modal
  position: fixed
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  background-color: rgba(0, 0, 0, 0.7)
  display: flex
  align-items: center
  justify-content: center
  z-index: 10
._modal_background
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
._modal_image
  z-index: 20
  max-width: 90vw
  max-height: 90vh
  margin: 0 auto
._modal_close
  position: absolute
  top: 20px
  right: 20px
  font-size: 40px
  color: #FFFFFF
  cursor: pointer
</style>
