<script setup lang="ts">
import { computed } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
import type { WorkbenchColumnId, WorkbenchModuleKey } from '../composables/use-workbench-modules';
import { useWorkbenchModules } from '../composables/use-workbench-modules';

interface Props {
  columnId: WorkbenchColumnId;
  modules: WorkbenchModuleKey[];
  editing: boolean;
  collapsed: WorkbenchModuleKey[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (e: 'update:modules', modules: WorkbenchModuleKey[]): void;
  (e: 'hide', key: WorkbenchModuleKey): void;
  (e: 'toggle-collapse', key: WorkbenchModuleKey): void;
  (e: 'open-settings', key: WorkbenchModuleKey): void;
}>();

const { getModuleMeta } = useWorkbenchModules();

const modelValue = computed({
  get: () => props.modules,
  set: (val: WorkbenchModuleKey[]) => emit('update:modules', val)
});
</script>

<template>
  <VueDraggable
    v-model="modelValue"
    group="workbench-modules"
    :animation="180"
    handle=".module-drag-handle"
    :disabled="!editing"
    class="workbench-column"
  >
    <template v-for="key in modelValue" :key="key">
      <component
        :is="getModuleMeta(key)?.component"
        :module-key="key"
        :editing="editing"
        :collapsed="collapsed.includes(key)"
        @hide="emit('hide', key)"
        @toggle-collapse="emit('toggle-collapse', key)"
        @open-settings="emit('open-settings', key)"
      />
    </template>
  </VueDraggable>
</template>

<style scoped>
.workbench-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 200px;
}
</style>
