<template>
  <AudioCard
    :style="{
      '--box-color': 'var(--color-fuchsia)'
    }"
    :supports="['stop']"
    label="SFX"
    :node="node"
    @delete="emit('delete')"
  >
    <template #preview>
      <div
        v-for="sound in node.activeSounds"
      >
        {{ sound.name }}
      </div>
    </template>
    <template #popover>
      <div class="a-sfx__popover">
        <SfxSound
          v-for="[name, sounds] in grouppedSounds"
          :key="name"
          :sounds="sounds"
          :name="name"
        />
      </div>
    </template>
  </AudioCard>
</template>
<script setup lang="ts">
import {computed, UnwrapNestedRefs} from 'vue';
import {SfxGroupNode} from '../../model/Audio/SfxGroupNode';
import AudioCard from './AudioCard.vue';
import {groupBy} from '../../utils/groupBy';
import SfxSound from './SfxSound.vue';


const props = defineProps<{
  node: UnwrapNestedRefs<SfxGroupNode>,
}>();

const emit = defineEmits<{
  'delete': [],
}>();


const grouppedSounds = computed(() => {
  return groupBy(props.node.sounds(), (sound) => {
    return sound.name.replace(/(\d+)$/, '').trim();
  })
});



</script>
<style>
.a-sfx__popover {
  --box-size: 160px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--box-size), 1fr));
  gap: var(--s-5)
}

</style>