<template></template>

<script setup lang="ts">
import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
import { TextureStorage } from '@/storage/textureStorage'
import { onMounted, onUnmounted } from 'vue'

const mapStorage = new MapStorage()
const tileStorage = new TileStorage()
const mapObjectStorage = new MapObjectStorage()
const spriteStorage = new SpriteStorage()
const characterTypeStorage = new CharacterTypeStorage()
const characterHairStorage = new CharacterHairStorage()
const textureStorage = new TextureStorage()

let currentString = ''

async function handleKeyPress(event: KeyboardEvent) {
  // Ignore if typing in input/textarea
  if (document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') {
    return
  }

  currentString += event.key

  // Do something when string matches
  if (currentString.includes('reset')) {
    await mapStorage.destroy()
    await tileStorage.destroy()
    await mapObjectStorage.destroy()
    await spriteStorage.destroy()
    await characterTypeStorage.destroy()
    await characterHairStorage.destroy()
    await textureStorage.destroy()
    currentString = '' // Reset
  }

  // Reset string after a certain amount of time
  setTimeout(() => {
    currentString = ''
  }, 60000)
}

onMounted(() => window.addEventListener('keydown', handleKeyPress))
onUnmounted(() => window.removeEventListener('keydown', handleKeyPress))
</script>
