<script setup lang="ts">
import SemanticModal from '~/components/semantic/Modal.vue'
import Button from '~/components/ui/Button.vue'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

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

interface Props {
  action?: () => void
  disabled?: boolean
  confirmColor?: 'destructive' | 'primary'
}

const { t } = useI18n()

const emit = defineEmits<Events>()
const props = withDefaults(defineProps<Props>(), {
  action: () => undefined,
  disabled: false,
  confirmColor: 'danger'
})

const showModal = ref(false)

const confirm = () => {
  showModal.value = false
  emit('confirm')
  props.action?.()
}
</script>

<template>
  <button
    class="funkwhale dangerous-button"
    :class="{ 'is-disabled': disabled }"
    :disabled="disabled"
    @click.prevent.stop="showModal = true"
  >
    <slot />

    <semantic-modal
      v-model:show="showModal"
      class="small"
    >
      <h4 class="header">
        <slot name="modal-header">
          {{ t('components.common.DangerousButton.header.confirm') }}
        </slot>
      </h4>
      <div class="scrolling content">
        <div class="description">
          <slot name="modal-content" />
        </div>
      </div>
      <div class="actions">
        <Button
          color="secondary"
          variant="outline"
          @click="showModal = false"
        >
          {{ t('components.common.DangerousButton.button.cancel') }}
        </Button>
        <Button
          :color="confirmColor"
          @click="confirm"
        >
          <slot name="modal-confirm">
            {{ t('components.common.DangerousButton.button.confirm') }}
          </slot>
        </Button>
      </div>
    </semantic-modal>
  </button>
</template>
