<template>
  <div class="tw:h-full tw:min-h-0 tw:flex tw:flex-col tw:bg-white tw:border tw:border-gray-200 tw:rounded-lg tw:overflow-hidden">
    <!-- Заголовок -->
    <div class="tw:p-4 tw:bg-[#f8f9fa] tw:border-b tw:border-gray-200 tw:font-bold tw:text-[#374151] tw:flex-shrink-0">
      Доступные поля
    </div>

    <!-- Контент со скроллом -->
    <div class="tw:flex-1 tw:min-h-0 tw:overflow-y-auto tw:p-4">
      <draggable
        :list="availableFields"
        :group="{ name: 'fields', pull: 'clone', put: false }"
        :sort="false"
        :clone="cloneField"
        item-key="type"
        class="tw:space-y-2"
      >
        <template #item="{ element: field }">
          <div
            class="tw:p-3 tw:bg-gray-50 tw:border tw:border-gray-200 tw:rounded tw:cursor-move tw:hover:bg-gray-100 tw:transition-colors"
          >
            <div class="tw:flex tw:items-center tw:gap-2">
              <i :class="field.icon" class="tw:text-gray-600"></i>
              <span class="tw:text-sm tw:font-medium">{{ field.label }}</span>
            </div>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';
import { AVAILABLE_FIELDS } from './constants/availableFields.js';
import { useFormFields } from './composables/useFormFields.js';

const availableFields = ref(AVAILABLE_FIELDS);
const { generateFieldId } = useFormFields();

// Функция клонирования элемента при перетаскивании в канвас
function cloneField(field) {
  const id = generateFieldId();
  return {
    id: id,
    ...field.defaultConfig,
    name: field.defaultConfig.name || `field_${id.split('_')[1]}`,
  };
}
</script>

<style scoped>
</style>
