<script setup lang="ts">
import type { Channel } from '~/types'
import SemanticModal from '~/components/semantic/Modal.vue'
import ChannelAlbumForm from '~/components/channels/AlbumForm.vue'
import { watch, ref } from 'vue'

interface Events {
  (e: 'created'): void
}

interface Props {
  channel: Channel
}

const emit = defineEmits<Events>()
defineProps<Props>()

const isLoading = ref(false)
const submittable = ref(false)
const show = ref(false)

watch(show, () => {
  isLoading.value = false
  submittable.value = false
})

const albumForm = ref()
</script>

<template>
  <semantic-modal
    v-model:show="show"
    class="small"
  >
    <h4 class="header">
      <translate
        v-if="channel.content_category === 'podcast'"
      >
        New series
      </translate>
      <translate
        v-else
      >
        New album
      </translate>
    </h4>
    <div class="scrolling content">
      <channel-album-form
        ref="albumForm"
        :channel="channel"
        @loading="isLoading = $event"
        @submittable="submittable = $event"
        @created="emit('created')"
      />
    </div>
    <div class="actions">
      <button class="ui basic cancel button">
        Cancel
      </button>
      <button
        :class="['ui', 'primary', {loading: isLoading}, 'button']"
        :disabled="!submittable"
        @click.stop.prevent="albumForm.submit()"
      >
        Create
      </button>
    </div>
  </semantic-modal>
</template>
