<template>
  <q-card class="col-12">
    <q-card-section class="fit row justify-start content-center items-center">
      <div class="col-12 text-center text-h6">{{ apiKey.name }}</div>
      <q-btn
        class="absolute-top-right q-ma-sm"
        color="negative"
        icon="mdi-delete"
        round
        @click="deleteKey"
      />
    </q-card-section>
    <q-card-section
      v-if="apiKey.token"
      class="fit row justify-start content-center items-center q-gutter-sm"
    >
      <q-input class="col" outlined label="API Key" :model-value="apiKey.token" />
      <div class="row justify-end content-end items-end">
        <q-btn color="primary" icon="mdi-content-copy" round @click="copyApiKey" />
      </div>
      <q-banner class="fit bg-primary text-white" inline dense rounded>
        ApiKey wird nur einmalig angezeigt. Bitte kopieren!
      </q-banner>
    </q-card-section>
    <q-card-section class="fit row justify-start content-center items-center q-gutter-sm">
      <q-input
        class="fit"
        type="textarea"
        outlined
        label="Description"
        readonly
        :model-value="apiKey.description"
      />
    </q-card-section>
  </q-card>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
export default defineComponent({
  name: 'ApiKey',
  props: {
    apiKey: {
      type: Object as PropType<FG.ApiKey>,
      required: true,
    },
  },
  emits: {
    delete: (apiKey: FG.ApiKey) => !!apiKey,
  },
  setup(props, { emit }) {
    async function copyApiKey() {
      await navigator.clipboard.writeText(<string>props.apiKey.token);
      console.log('copying api key', props.apiKey.token);
    }
    function deleteKey() {
      emit('delete', props.apiKey);
    }
    return {
      deleteKey,
      copyApiKey,
    };
  },
});
</script>
