<template>
  <component
    :is="widgetComponent"
    :widget="widget"
    :scale="scale"
    :selected="selected"
    @select="$emit('select')"
    @drag-start="$emit('drag-start', $event)"
    @resize-start="$emit('resize-start', $event)"
  />
</template>

<script setup>
import { computed, markRaw } from 'vue';
import { WIDGET_TYPES } from '../constants';

// Import all widget element components
import LabelElement from './widgets/elements/LabelElement.vue';
import ButtonElement from './widgets/elements/ButtonElement.vue';
import LedElement from './widgets/elements/LedElement.vue';
import IconElement from './widgets/elements/IconElement.vue';
import TabViewElement from './widgets/elements/TabViewElement.vue';
import TabPageElement from './widgets/elements/TabPageElement.vue';
import PowerFlowElement from './widgets/elements/PowerFlowElement.vue';
import PowerNodeElement from './widgets/elements/PowerNodeElement.vue';
import ChartElement from './widgets/elements/ChartElement.vue';
import ClockElement from './widgets/elements/ClockElement.vue';
import RoomCardElement from './widgets/elements/RoomCardElement.vue';
import RectangleElement from './widgets/elements/RectangleElement.vue';
import ArcElement from './widgets/elements/ArcElement.vue';
import ButtonMatrixElement from './widgets/elements/ButtonMatrixElement.vue';

const props = defineProps({
  widget: { type: Object, required: true },
  scale: { type: Number, default: 1 },
  selected: { type: Boolean, default: false }
});

defineEmits(['select', 'drag-start', 'resize-start']);

// Map widget types to components
const componentMap = {
  [WIDGET_TYPES.LABEL]: markRaw(LabelElement),
  [WIDGET_TYPES.BUTTON]: markRaw(ButtonElement),
  [WIDGET_TYPES.LED]: markRaw(LedElement),
  [WIDGET_TYPES.ICON]: markRaw(IconElement),
  [WIDGET_TYPES.TABVIEW]: markRaw(TabViewElement),
  [WIDGET_TYPES.TABPAGE]: markRaw(TabPageElement),
  [WIDGET_TYPES.POWERFLOW]: markRaw(PowerFlowElement),
  [WIDGET_TYPES.POWERNODE]: markRaw(PowerNodeElement),
  [WIDGET_TYPES.CHART]: markRaw(ChartElement),
  [WIDGET_TYPES.CLOCK]: markRaw(ClockElement),
  [WIDGET_TYPES.ROOMCARD]: markRaw(RoomCardElement),
  [WIDGET_TYPES.RECTANGLE]: markRaw(RectangleElement),
  [WIDGET_TYPES.ARC]: markRaw(ArcElement),
  [WIDGET_TYPES.BUTTONMATRIX]: markRaw(ButtonMatrixElement)
};

const widgetComponent = computed(() => {
  return componentMap[props.widget.type] || LabelElement;
});
</script>
