<template>
  <template v-if="!onlyPreview">
    <div :class="['file-item']">
      <div
        class="file-item-title"
        v-if="localData[title as string] !== undefined && localData[title as string] !== ''">
        {{ localData[title as string] }}
      </div>
      <div class="file-item-file-c">
        <a :href="localFilePath" target="_blank" class="file-item-file clickable">
          <div :class="['file-item-preview form-item-picture small-picture']">
            <div class="image-c" v-if="isPicture">
              <img :src="localFilePath" />
            </div>
            <div v-else>{{ fileType.toLocaleUpperCase() }}</div>
          </div>
          <div class="file-item-name">
            {{ fileName }}
          </div>
        </a>
        <div class="actions-c" v-if="editable || $slots.actionButtons">
          <slot name="actionButtons"></slot>
          <i
            class="ico-c ico-section ico-btn back-grad-dgrey"
            @click="OnClick"
            v-if="editable">
            <svg><use href="/src/assets/images/icons.svg#replace"></use></svg>
          </i>
        </div>
      </div>
    </div>
  </template>
  <template v-else>
    <div class="form-item-picture only-image clickable">
      <a :href="localFilePath" target="_blank">
        <div class="image-c" v-if="isPicture">
          <img :src="localFilePath" />
        </div>
        <div v-else>{{ fileType.toLocaleUpperCase() }}</div>
      </a>
      <div class="actions-c actions-top" v-if="editable || $slots.actionButtons">
        <slot name="actionButtons"></slot>
        <i
          class="ico-c ico-section ico-btn back-grad-dgrey"
          @click="OnClick"
          v-if="editable">
          <svg><use href="/src/assets/images/icons.svg#replace"></use></svg>
        </i>
      </div>
    </div>
  </template>
</template>
<script setup lang="ts">
  import { ref, reactive, watch } from 'vue'
  import axios from 'axios'
  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()

  export interface Props {
    data: Record<string, any>
    onlyPreview?: boolean
    filePath: string | null | undefined
    title?: string
    editable?: boolean
    usePath?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    onlyPreview: false,
    editable: true,
    usePath: false
  })
  const emit = defineEmits(['click'])

  const localData = reactive<Record<string, any>>(props.data)
  const localFilePath = ref<string>('')

  const fileType = ref<string>('')
  const fileName = ref<string>('')
  const isPicture = ref<boolean>(true)

  if (props.filePath !== undefined && props.filePath !== null) {
    localFilePath.value = props.usePath
      ? (props.filePath as string)
      : (((axios.defaults.baseURL as string) + props.filePath) as string as string)

    fileType.value = globalStore.FileType(localFilePath.value)
    fileName.value = globalStore.FileName(localFilePath.value)
    isPicture.value = globalStore.IsImage(localFilePath.value)
  }

  const OnClick = () => {
    let d = {
      fileType: fileType.value,
      fileName: fileName.value
    }
    Object.assign(localData, d)
    emit('click', localData)
  }

  watch(
    () => props.filePath,
    () => {
      localFilePath.value = props.usePath
        ? (props.filePath as string)
        : (((axios.defaults.baseURL as string) + props.filePath) as string as string)
    }
  )
</script>
<style scoped>
  .actions-c {
    display: flex;
    position: absolute;
    right: 0;
    height: 100%;
    padding: 8px;
    align-items: center;
    pointer-events: fill;
  }
  .actions-c.actions-top{
    align-items: flex-start;
  }
  .form-item-picture.only-image{
    width: 140px;
    height: 140px;
  }
  .actions-c .ico-btn:last-child {
    margin-right: 0;
  }
</style>
