<template>
  <form @submit.prevent="submitCreateSecret" ref="createSecretForm">
    <sl-input
      label="Name"
      required
      autocomplete="off"
      help-text="Name of the secret"
      :value="secretName"
      @input="secretName = $event.target.value"
      ref="nameField"
    ></sl-input>
    <template v-if="group">
      <sl-input
        disabled
        :value="group"
        label="Group"
        help-text="Path of the group the secret will be created in."
      ></sl-input>
      <br />
    </template>
    <div class="flex justify-between w-full">
      <div class="grow w-full mr-2">
        <sl-range
          min="8"
          max="64"
          @sl-change="secretLength = $event.target.value"
          :value="secretLength"
          label="Length"
        ></sl-range>
      </div>
      <div class="flex-none">
        <sl-button outline @click="generatePassword">Auto-generate</sl-button>
      </div>
    </div>
    <sl-input
      label="Secret"
      type="password"
      required
      autocomplete="off"
      help-text="Secret value"
      @input="secretValue = $event.target.value"
      :value="secretValue"
      ref="secretField"
      password-toggle
    ></sl-input>
    <label for="clients" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
      >Clients</label
    >
    <ClientSelectDropdown v-model="selectedClients" />
    <div slot="footer">
      <sl-button size="medium" variant="success" outline @click="submitCreateSecret" class="mr-2">
        <sl-icon slot="prefix" name="person-plus"></sl-icon>
        Submit
      </sl-button>
      <sl-button size="medium" outline @click="cancelCreateSecret">Cancel</sl-button>
    </div>
  </form>
</template>

<script setup lang="ts">
import type { SecretCreate } from '@/client'
import { ref } from 'vue'
import { generateRandomPassword } from '@/api/password'
import AddSecretsToClients from '@/components/secrets/AddSecretToClients.vue'
import ClientSelectDropdown from '@/components/clients/ClientSelectDropdown.vue'
import { setFieldValidation } from '@/api/validation'

const props = defineProps<{ group?: string }>()

const emit = defineEmits<{ (e: 'submit', data: SecretCreate): void; (e: 'cancel'): void }>()

const secretName = ref<string>()
const createSecretForm = ref<HTMLFormElement>()
const nameField = ref<HTMLSlInputElement>()
const secretField = ref<HTMLSlInputElement>()
const secretValue = ref()
const secretLength = ref(8)
const autoGenerate = ref(false)
const selectedClients = ref<string[]>()

function generatePassword() {
  const password = generateRandomPassword(secretLength.value)
  secretValue.value = password
}

function validateName() {
  nameField.value.reportValidity()
}

function validateSecret() {
  secretField.value.reportValidity()
}

function cancelCreateSecret() {
  createSecretForm.value.reset()
  emit('cancel')
}

function submitCreateSecret() {
  validateName()
  validateSecret()

  if (createSecretForm.value?.checkValidity()) {
    console.log('SelectedClients: ', selectedClients.value)
    const secretGroup = props.group ?? null
    let secretClients = []
    if (Array.isArray(selectedClients.value)) {
      secretClients = [...selectedClients.value]
    }
    const secretCreate: SecretCreate = {
      value: secretValue.value,
      name: secretName.value,
      clients: secretClients,
      client_distinguisher: 'id',
      group: secretGroup,
    }
    emit('submit', secretCreate)
  }
}
</script>
