<template>
  <div
    class="z-[1] select-none touch-none"
    :class="[
      selected ? 'outline outline-2 outline-accent outline-offset-2' : '',
      extraClass
    ]"
    :style="baseStyle"
    @mousedown.stop="!noInteraction && $emit('drag-start', { id: widget.id, event: $event })"
    @touchstart.stop="!noInteraction && $emit('drag-start', { id: widget.id, event: $event })"
    @click.stop="handleClick"
  >
    <slot></slot>

    <!-- Resize Handle -->
    <div
      v-if="selected"
      class="absolute -right-1.5 -bottom-1.5 w-3.5 h-3.5 rounded-[4px] bg-accent border-[2px] border-[#1b1308] shadow-[0_4px_12px_rgba(0,0,0,0.35)] cursor-se-resize z-10"
      data-resize-handle
      @mousedown.stop="$emit('resize-start', { id: widget.id, event: $event })"
      @touchstart.stop="$emit('resize-start', { id: widget.id, event: $event })"
    >
      <span class="absolute right-[2px] bottom-[2px] w-[6px] h-[6px] border-r-2 border-b-2 border-[#1b1308a6] rounded-[2px]"></span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { fontSizes } from '../../../constants';

const props = defineProps({
  widget: { type: Object, required: true },
  scale: { type: Number, default: 1 },
  selected: { type: Boolean, default: false },
  extraClass: { type: String, default: '' },
  extraStyle: { type: Object, default: () => ({}) },
  noInteraction: { type: Boolean, default: false }
});

const emit = defineEmits(['select', 'drag-start', 'resize-start', 'click']);

const baseStyle = computed(() => {
  const w = props.widget;
  const s = props.scale;

  return {
    left: `${w.x * s}px`,
    top: `${w.y * s}px`,
    width: `${w.w * s}px`,
    height: `${w.h * s}px`,
    fontSize: `${(fontSizes[w.fontSize] || 14) * s}px`,
    color: w.textColor,
    position: 'absolute',
    zIndex: 1,
    cursor: 'move',
    userSelect: 'none',
    touchAction: 'none',
    ...props.extraStyle
  };
});

function handleClick(event) {
  emit('click', event);
  emit('select');
}
</script>
