<template>
  <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0 z-20">
    <div class="self-end mt-2 flex gap-2">
      <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="showMapObjectSettings = !showMapObjectSettings" class="btn-indigo py-1.5 px-4">
        <img src="/assets/icons/mapEditor/gear.svg" class="w-4 h-4 invert" 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>

  <Modal :is-modal-open="showMapObjectSettings" @modal:close="showMapObjectSettings = false" :modal-height="320" bg-style="none">
    <template #modalHeader>
      <h3 class="m-0 font-medium shrink-0 text-white">Map object settings</h3>
    </template>
    <template #modalBody>
      <div class="m-4">
        <form method="post" @submit.prevent="" class="inline">
          <div class="gap-2.5 flex flex-wrap">
            <div class="form-field-full">
              <label for="name">Name</label>
              <input class="input-field" v-model="mapObjectName" name="name" id="name" />
            </div>
            <div class="form-field-half">
              <label for="originX">Origin X</label>
              <input class="input-field" v-model="mapObjectOriginX" name="originX" id="originX" type="number" min="0.0" step="0.1" />
            </div>
            <div class="form-field-half">
              <label for="originY">Origin Y</label>
              <input class="input-field" v-model="mapObjectOriginY" name="originY" id="originY" type="number" min="0.0" step="0.1" />
            </div>
          </div>
          <button class="btn-cyan px-4 py-1.5 min-w-24" @click="handleUpdate">Save</button>
        </form>
      </div>
    </template>
  </Modal>
</template>

<script setup lang="ts">
import type { MapObject, Map as MapT, PlacedMapObject } from '@/application/types'
import Modal from '@/components/utilities/Modal.vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { MapObjectStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { onMounted, ref } from 'vue'

const props = defineProps<{
  placedMapObject: PlacedMapObject
  map: MapT
}>()

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

const gameStore = useGameStore()
const mapEditor = useMapEditorComposable()

const mapObjectStorage = new MapObjectStorage()
const mapObject = ref<MapObject | null>(null)
const showMapObjectSettings = ref(false)
const mapObjectName = ref('')
const mapObjectOriginX = ref(0)
const mapObjectOriginY = ref(0)

const handleMove = () => {
  emit('move', props.placedMapObject.id, props.map)
}

const handleRotate = () => {
  emit('rotate', props.placedMapObject.id, props.map)
}

const handleDelete = () => {
  emit('delete', props.placedMapObject.id, props.map)
}

async function handleUpdate() {
  if (!mapObject.value) return

  gameStore.connection?.emit(
    'gm:mapObject:update',
    {
      id: props.placedMapObject.mapObject as string,
      name: mapObjectName.value,
      originX: mapObjectOriginX.value,
      originY: mapObjectOriginY.value
    },
    async (response: boolean) => {
      if (!response) return
      await mapObjectStorage.update(mapObject.value!.id, {
        name: mapObjectName.value,
        originX: mapObjectOriginX.value,
        originY: mapObjectOriginY.value
      })
      mapEditor.triggerMapObjectRefresh()
    }
  )
}

onMounted(async () => {
  if (!props.placedMapObject.mapObject) return

  mapObject.value = await mapObjectStorage.get(props.placedMapObject.mapObject as string)
  if (!mapObject.value) return

  mapObjectName.value = mapObject.value.name
  mapObjectOriginX.value = mapObject.value.originX
  mapObjectOriginY.value = mapObject.value.originY
})
</script>
