<template>
  <div
    ref="libaryItemRef"
    class="p-8px text-center border border-solid border-border rounded-md flex flex-col items-center justify-center cursor-pointer"
  >
    <el-tooltip :content="comp.description">
      <div class="bg-gray-900 w-80px h-80px rounded-md flex justify-center items-center">
        <img :src="img" class="object-fit-cover" width="60px" height="60px" alt="custom comp" />
      </div>
    </el-tooltip>
    <div class="text-xs truncate mt-1">
      {{ comp.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useDrag } from 'vue-hooks-plus'
import { useAppStore } from '@/store/modules/app'

import type { ICustomWidget } from '@/types'

const props = defineProps<{
  comp: ICustomWidget
}>()

const img = computed(() => {
  return props.comp.iconFile ? URL.createObjectURL(props.comp.iconFile) : ''
})

const libaryItemRef = ref<HTMLElement>()
const draging = ref(false)
const appStore = useAppStore()

useDrag(props.comp.widget, libaryItemRef, {
  onDragStart: () => {
    draging.value = true
    appStore.libraryDragging = true
  },
  onDragEnd: () => {
    draging.value = false
    appStore.libraryDragging = false
  }
})
</script>

<style scoped></style>
