<template>
  <div v-if="isSuperuser">
    <AddShowModal v-if="!modal" ref="addShowModal" />

    <button
      type="button"
      :data-testid="testId"
      class="btn btn-default md:tw-whitespace-nowrap"
      @click="resolvedModal.openModal()"
    >
      {{ t('showCreator.title') }}
    </button>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex'
import { computed, ref } from 'vue'

import AddShowModal from './AddShowModal.vue'
import { useI18n } from '@/i18n'
import { useAuthStore } from '@/stores/auth'

type Modal = {
  openModal: () => void
}

const props = defineProps<{
  modal?: Modal
  testId?: string
}>()

const store = useStore()
const { isSuperuser } = useAuthStore()
const { t } = useI18n()

const addShowModal = ref<Modal>()
const resolvedModal = computed(() => (props.modal ?? addShowModal.value) as Modal)
const loaded = computed(() => ({
  types: store.state.shows.loaded.types,
  fundingCategories: store.state.shows.loaded.fundingCategories,
}))

// TODO: not sure these belong here.
if (!loaded.value.types) {
  store.dispatch('shows/fetchMetaArray', { property: 'types', onlyActive: true })
}

if (!loaded.value.fundingCategories) {
  store.dispatch('shows/fetchMetaArray', { property: 'fundingCategories', onlyActive: true })
}
</script>