<template>
  <div
    ref="libaryItemRef"
    :key="comp.key"
    draggable="true"
    class="place-self-center w-60px h-60px border border-solid border-border rounded-4px flex flex-col items-center text-text-secondary justify-center cursor-move hover:bg-bg-secondary hover:text-text-active"
  >
    <div class="w-32px h-32px flex items-center justify-center">
      <img width="32px" :src="comp.icon" draggable="false" />
    </div>
    <span class="text-xs">{{ comp.label }}</span>
  </div>
</template>

<script setup lang="ts">
import type { IComponentModelConfig } from '@/lvgl-widgets/type'

import { ref } from 'vue'
import { useDrag } from 'vue-hooks-plus'
import { useAppStore } from '@/store/modules/app'

const props = defineProps<{
  comp: IComponentModelConfig
}>()
const libaryItemRef = ref<HTMLElement>()
const draging = ref(false)
const appStore = useAppStore()

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

<style scoped></style>
