<template>
  <GnModal
    :open="props.open"
    :title="t('settings.synapseTargetAddTitle')"
    @update:open="emit('close')"
  >
  <div class="create-target-body">
    <GnInput
      v-model="tokenRef"
      :label="t('settings.synapseTargetColRef')"
      :placeholder="t('settings.synapseTargetRefPlaceholder')"
      :disabled="props.creating"
      @keydown.enter="submit"
    />
    <GnInput
      v-model="secret"
      :label="t('settings.synapseTargetSecret')"
      :placeholder="t('settings.synapseTargetSecretPlaceholder')"
      :disabled="props.creating"
      @keydown.enter="submit"
    />
    <p class="create-target-hint">
      {{ t('settings.synapseTargetHintBefore') }} <code>POST /webhooks/synapse</code>
      {{ t('settings.synapseTargetHintAfter') }}
    </p>
  </div>

  <template #actions>
    <GnButton variant="secondary" @click="emit('close')" :disabled="props.creating">
      {{ t('common.cancel') }}
    </GnButton>
    <GnButton variant="primary" :loading="props.creating" @click="submit">
      {{ t('common.add') }}
    </GnButton>
  </template>
</GnModal>
</template>

<script setup>
import { ref, watch } from 'vue'
import { t } from '@/i18n/index.js'
import { GnButton, GnInput, GnModal } from 'gnexus-ui-kit/vue'

const props = defineProps({
  open: Boolean,
  creating: Boolean,
})

const emit = defineEmits(['close', 'submit'])

const tokenRef = ref('')
const secret = ref('')

watch(() => props.open, (open) => {
  if (open) {
    tokenRef.value = ''
    secret.value = ''
  }
})

function submit() {
  const ref = tokenRef.value.trim()
  const trimmedSecret = secret.value.trim()
  if (!ref || trimmedSecret.length < 16) return
  emit('submit', ref, trimmedSecret)
}
</script>

<style scoped lang="scss">
.create-target-body {
  min-width: min(360px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.create-target-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--gn-color-text-medium);

  code {
    font-family: var(--gn-font-family-base);
  }
}
</style>