<template>
  <GnModal
    :open="props.open"
    title="Add Synapse Target"
    @update:open="emit('close')"
  >
  <div class="create-target-body">
    <GnInput
      v-model="tokenRef"
      label="Token ref"
      placeholder="e.g. navi-main (as in the Synapse admin panel)"
      :disabled="props.creating"
      @keydown.enter="submit"
    />
    <GnInput
      v-model="secret"
      label="Delivery secret"
      placeholder="s2s secret of the Synapse target"
      :disabled="props.creating"
      @keydown.enter="submit"
    />
    <p class="create-target-hint">
      In the Synapse admin panel create a target pointing at
      <code>POST /webhooks/synapse</code> of this Navi and paste its secret here.
      Navi uses it to verify that deliveries really came from Synapse.
    </p>
  </div>

  <template #actions>
    <GnButton variant="secondary" @click="emit('close')" :disabled="props.creating">
      Cancel
    </GnButton>
    <GnButton variant="primary" :loading="props.creating" @click="submit">
      Add
    </GnButton>
  </template>
</GnModal>
</template>

<script setup>
import { ref, watch } from 'vue'
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: 360px;
  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>