<script setup lang="ts">
import type { S3Key } from "@/client";
import type { Ref } from "vue";
import { ref, watch } from "vue";
import BootstrapIcon from "@/components/BootstrapIcon.vue";
import DeleteModal from "@/components/Modals/DeleteModal.vue";

const props = defineProps<{
  s3key: S3Key;
  deletable: boolean;
  loading: boolean;
}>();

const emit = defineEmits<{
  (e: "delete-key", accessKey: string): void;
}>();

watch(
  () => props.s3key.access_key,
  () => {
    visibleSecret.value = false;
  }
);

const visibleSecret: Ref<boolean> = ref(false);

function deleteKeyTrigger() {
  if (props.deletable) {
    emit("delete-key", props.s3key.access_key);
  }
}
</script>

<template>
  <DeleteModal
    modalID="delete-key-modal"
    :object-name-delete="props.s3key.access_key"
    :back-modal-id="undefined"
    @confirm-delete="deleteKeyTrigger"
  />
  <h3>Access Key:</h3>
  <div v-if="props.loading" class="placeholder-glow">
    <span class="placeholder col-5 mt-3 mb-2 fs-4"></span><br />
  </div>
  <input
    v-else
    class="form-control-plaintext text-white fs-4"
    type="text"
    :value="props.s3key.access_key"
    aria-label="S3 Access Key"
    readonly
  />
  <div class="d-flex align-items-center">
    <span class="fs-3">Secret Key:</span>
    <button
      class="btn btn-outline-secondary ms-3"
      :class="{ active: visibleSecret }"
      data-bs-toggle="button"
      :disabled="props.loading"
      @click="visibleSecret = !visibleSecret"
    >
      <bootstrap-icon
        :width="18"
        :height="18"
        fill="white"
        :icon="visibleSecret ? 'eye' : 'eye-slash'"
      />
    </button>
  </div>
  <div v-if="props.loading" class="placeholder-glow">
    <span class="placeholder col-7 mt-3 mb-4 fs-4"></span><br />
  </div>
  <input
    v-else
    id="s3-secret-key"
    class="form-control-plaintext text-white fs-4 mb-3"
    :type="visibleSecret ? 'text' : 'password'"
    :value="props.s3key.secret_key"
    aria-label="S3 Access Key"
    aria-describedby="s3-secret-key"
    readonly
  />
  <button
    type="button"
    class="btn btn-danger fs-5"
    :disabled="!props.deletable || props.loading"
    data-bs-toggle="modal"
    data-bs-target="#delete-key-modal"
  >
    Delete
  </button>
</template>

<style scoped></style>