<template>
  <template v-if="groups">
    <sl-select
      placeholder="Target parent"
      hoist
      :value="selectedPath"
      @sl-change="selectedPath = $event.target.value"
    >
      <sl-option value="/">/</sl-option>
      <sl-option v-for="group in groups" :key="group.path" :value="group.path">{{
        group.path
      }}</sl-option>
    </sl-select>
  </template>
  <sl-button variant="success" outline @click="selectPath" class="mr-2"> Move</sl-button>
  <sl-button variant="default" outline @click="emit('cancel')"> Cancel</sl-button>
</template>
<script setup lang="ts">
import { SshecretAdmin } from '@/client'
import type { ClientSecretGroup } from '@/client'
import { ref, onMounted, toRef } from 'vue'

const props = defineProps<{ self: string }>()
const groups = ref<ClientSecretGroup[]>([])

const ownPath = toRef(() => props.self)
const emit = defineEmits<{ (e: 'selected', data: string): void; (e: 'cancel'): void }>()

const selectedPath = ref()

async function getGroups() {
  selectedPath.value = props.self
  const response = await SshecretAdmin.getSecretGroupsApiV1SecretsGroupsGet({
    query: { flat: true },
  })
  if (response.data) {
    groups.value = response.data.groups
  }
}

function selectPath() {
  emit('selected', selectedPath.value)
}

onMounted(getGroups)
</script>
