# Добавление стилей компонента
if globalThis.stylFns and globalThis.stylFns['app/components/Admin/CategoryNode/index.styl']
  styleElement = document.createElement('style')
  styleElement.type = 'text/css'
  styleElement.textContent = globalThis.stylFns['app/components/Admin/CategoryNode/index.styl']
  document.head.appendChild(styleElement)
else
  log '⚠️ Стили CategoryNode не найдены'

module.exports = {
  name: 'category-node'
  props:
    category:
      type: Object
      required: true
    level:
      type: Number
      default: 0

  data: ->
    {
      isExpanded: false
      isDragging: false
      isDragOver: false
    }

  computed:
    hasChildren: ->
      @category.children and @category.children.length > 0

  methods:
    toggleExpanded: ->
      @isExpanded = not @isExpanded

    onDragStart: (event) ->
      @isDragging = true
      event.dataTransfer.setData('text/plain', @category._id)
      event.dataTransfer.effectAllowed = 'move'
      log 'Начало перетаскивания категории: '+@category._id

    onDragEnd: ->
      @isDragging = false
      log 'Завершение перетаскивания'

    onDragOver: (event) ->
      event.preventDefault()
      event.dataTransfer.dropEffect = 'move'

    onDragEnter: (event) ->
      event.preventDefault()
      @isDragOver = true

    onDragLeave: ->
      @isDragOver = false

    onDrop: (event) ->
      event.preventDefault()
      @isDragOver = false
      
      draggedCategoryId = event.dataTransfer.getData('text/plain')
      if draggedCategoryId != @category._id
        @$emit('move', draggedCategoryId, @category._id)
        log 'Перемещение категории '+draggedCategoryId+' в '+@category._id

  mounted: ->
    # Автоматически раскрываем первые два уровня
    if @level < 2
      @isExpanded = true

  render: (new Function '_ctx', '_cache', globalThis.renderFns['app/components/Admin/CategoryNode/index.pug'])()
}