<template>
  <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0" v-if="zoneEditorStore.selectedZoneObject">
    <div class="self-end mt-2 flex gap-2">
      <div>
        <label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
        <input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-field max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" />
      </div>
      <button @mousedown.stop @click="handleDelete" class="btn-red py-1.5 px-4">
        <img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
      </button>
      <button @mousedown.stop @click="handleRotate" class="btn-cyan py-1.5 px-4">Rotate</button>
      <button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-4 min-w-24">Move</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import { ref, computed, watch } from 'vue'

const emit = defineEmits(['update_depth', 'move', 'delete', 'rotate'])
const zoneEditorStore = useZoneEditorStore()

const objectDepth = ref(zoneEditorStore.objectDepth)

watch(
  () => zoneEditorStore.selectedZoneObject,
  (selectedZoneObject) => {
    objectDepth.value = selectedZoneObject?.depth ?? 0
  }
)

const handleDepthInput = () => {
  const depth = parseFloat(objectDepth.value.toString())
  if (!isNaN(depth)) {
    emit('update_depth', depth)
  }
}

const handleRotate = () => {
  emit('rotate', zoneEditorStore.selectedZoneObject?.id)
}

const handleMove = () => {
  emit('move')
}

const handleDelete = () => {
  emit('delete', zoneEditorStore.selectedZoneObject?.id)
  zoneEditorStore.setSelectedZoneObject(null)
}
</script>
