<template>
  <component
    :is="widgetComponent"
    :widget="themedWidget"
    :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 { useEditorStore } from '../stores/editor';
import { invertLightness } from '../utils';
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 store = useEditorStore();

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

const colorKeys = ['textColor', 'bgColor', 'borderColor', 'arcScaleColor', 'arcValueColor'];

const themedWidget = computed(() => {
  const w = props.widget;
  if (!store.nightPreview || w.themeFixed) return w;
  const copy = { ...w };
  for (const key of colorKeys) {
    if (copy[key] && typeof copy[key] === 'string' && copy[key].startsWith('#')) {
      copy[key] = invertLightness(copy[key]);
    }
  }
  if (copy.shadow && copy.shadow.enabled && copy.shadow.color) {
    copy.shadow = { ...copy.shadow, color: invertLightness(copy.shadow.color) };
  }
  return copy;
});
</script>
