<template>
  <Teleport to="body">
    <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="260">
      <template #modalHeader>
        <h3 class="text-lg">Objects</h3>
        <div class="flex gap-1.5 flex-wrap">
          <div class="w-full flex flex-col">
            <label class="mb-1.5 font-titles hidden" for="z-index">Z-index</label>
            <input @mousedown.stop class="input-cyan" type="number" name="z-index" placeholder="Z-index" />
          </div>
        </div>
      </template>
      <template #modalBody>
        <div class="my-[15px] mx-auto">
          <div class="columns-2 sm:columns-3 md:columns-4 lg:columns-5 gap-4">
            <div v-for="(object, index) in zoneEditorStore.objectList" :key="index" class="mb-4">
              <img
                :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
                alt="Object"
                @click="zoneEditorStore.setSelectedObject(object)"
                :class="{
                  'w-full h-auto cursor-pointer border-2 transition-all duration-300': true,
                  'border-2 border-solid border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
                  'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id
                }"
              />
            </div>
          </div>
        </div>
      </template>
    </Modal>
  </Teleport>
</template>

<script setup lang="ts">
import config from '@/config'
import { ref, onMounted } from 'vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useSocketStore } from '@/stores/socket'
import Modal from '@/components/utilities/Modal.vue'
import type { Object } from '@/types'

const socket = useSocketStore()
const isModalOpen = ref(false)
const zoneEditorStore = useZoneEditorStore()

onMounted(async () => {
  isModalOpen.value = true
  socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
    zoneEditorStore.setObjectList(response)
  })
})
</script>