<template>
  <div class="object-manager">
    <div class="image-container">
      <!--      @TODO show img with width100% to keep quality and show it center with padding around it, preferably the window wont jump if a larger object is selected -->
      <img :src="objectImageUrl" :alt="'Object ' + selectedObject" />
    </div>
    <div class="modal-form asset-manager">
      <form class="form-fields" @submit.prevent>
        <div class="form-field name">
          <label for="name">Name</label>
          <input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
        </div>
        <div class="form-field name">
          <label for="name">Origin X</label>
          <!-- @TODO only allow numbers here -->
          <input class="input-cyan" type="text" name="name" placeholder="Origin X" />
        </div>
        <div class="form-field name">
          <label for="name">Origin Y</label>
          <!-- @TODO only allow numbers here -->
          <input class="input-cyan" type="text" name="name" placeholder="Origin Y" />
        </div>
        <div class="submit">
          <button class="btn-cyan" type="button" @click="removeObject">Save</button>
          <button class="btn-bordeaux" type="button" @click="removeObject">Remove</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
import { useSocketStore } from '@/stores/socket'
import config from '@/config'

const socket = useSocketStore()
const assetManagerStore = useAssetManagerStore()
const selectedObject = computed(() => assetManagerStore.selectedObject)
const objectImageUrl = computed(() => `${config.server_endpoint}/assets/objects/${selectedObject.value}.png`)
const objectDetails = computed(() => assetManagerStore.objectDetails)

function removeObject() {
  socket.connection.emit('gm:object:remove', { object: selectedObject.value }, (response: boolean) => {
    if (!response) {
      console.error('Failed to remove object')
      return
    }
    refreshObjectList()
  })
}

function refreshObjectList() {
  socket.connection.emit('gm:object:list', {}, (response: string[]) => {
    assetManagerStore.setObjectList(response)
    assetManagerStore.setSelectedObject('')
  })
}

onMounted(() => {
  if (!selectedObject.value) {
    return
  }
  socket.connection.emit('gm:object:details', { object: selectedObject.value }, (response: any) => {
    assetManagerStore.setObjectDetails(response)
  })
})

onBeforeUnmount(() => {
  assetManagerStore.setSelectedObject('')
})
</script>

<style lang="scss">

.asset-info {
  .object-manager {
    height: 100%;
    overflow: auto;
  }
}

</style>
