<template>
  <Panel :show="show" :title="title || t('settings.settings')" id="setting" @close="close">
    <div class="flex-1 max-h-full p-4 overflow-hidden hover:overflow-y-auto">
      <keep-alive>
        <component :is="currentComponent" />
      </keep-alive>
      <slot />
      <!-- Settings Panel Content ... -->
    </div>
  </Panel>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import Panel from './Panel.vue'
import useComponent, { DynComponent } from '~/hooks/useComponent'

defineProps({
  show: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    required: false,
    default: () => '',
  },
})
const emit = defineEmits(['close'])
const cmpnt = useComponent()
const close = () => {
  emit('close')
}
const { t, locale } = useI18n()
const currentComponent = computed(() => cmpnt.settingsComponent.value)
onMounted(() => {
  document.addEventListener('keydown', (event) => {
    switch (event.key) {
      case 'Escape':
        emit('close')
        break
    }
  })
})

</script>
