<!-- SecretsEdit.vue -->
<script lang="ts">
import { defineComponent, ref, watch, PropType } from 'vue';
import { KubernetesSecret, KubernetesCluster } from '../types/kubernetes';
import { kubernetesService } from '../lib/kubernetes';
import { secretJsonToYaml } from '../lib/lib';
import { SecretUpdateOptions } from '../types/custom';

export default defineComponent({
  name: 'SecretsEdit',

  props: {
    show: {
      type: Boolean,
      default: false
    },
    secret: {
      type: Object as PropType<KubernetesSecret | null>,
      default: null
    },
    cluster: {
      type: Object as PropType<KubernetesCluster | null>,
      default: null
    }
  },

  emits: ['close', 'update-secret'],
  setup(props, { emit }) {
    // State
    const yamlContent = ref('');
    const isLoading = ref(false);
    const isSubmitting = ref(false);
    const error = ref('');
    const originalSecretName = ref('');

    // Watch for changes to show prop
    watch(() => props.show, (newVal) => {
      if (newVal && props.secret) {
        fetchSecretYaml();
      } else {
        yamlContent.value = '';
        error.value = '';
      }
    });

    // Methods
    const closeModal = () => {
      if (!isSubmitting.value) {
        emit('close');
      }
    };

    const fetchSecretYaml = async () => {
      if (!props.secret || !props.cluster) return;

      isLoading.value = true;
      error.value = '';

      originalSecretName.value = props.secret.metadata.name;

      try {
        const response = await kubernetesService.getSecret(
          props.cluster.contextName,
          props.secret.metadata.namespace,
          props.secret.metadata.name
        );

        if (response.success) {
          yamlContent.value = secretJsonToYaml(response.data);
        } else {
          error.value = response.msg || 'Failed to fetch secret YAML';
        }
      } catch (err: any) {
        error.value = `Error fetching secret YAML: ${err.message || err}`;
      } finally {
        isLoading.value = false;
      }
    };

    const updateSecret = (): void => {
      const opts: SecretUpdateOptions = {
        context: props.cluster.contextName,
        definition: yamlContent.value,
        origNamespace: props.secret.metadata.namespace,
        origName: props.secret.metadata.name
      }
      try {
        emit('update-secret', opts)
        closeModal()
      } catch (error: any) {
        alert(error)
      }
      return
    };

    return {
      yamlContent,
      isLoading,
      isSubmitting,
      error,
      originalSecretName,
      closeModal,
      fetchSecretYaml,
      updateSecret
    };
  }
});
</script>


<template>
  <div v-if="show" class="modal-overlay" @click="closeModal">
    <div class="modal-content yaml-editor" @click.stop>
      <div class="modal-header">
        <h3>Edit Secret YAML</h3>
        <button class="close-button" @click="closeModal">×</button>
      </div>

      <div class="modal-body">
        <div v-if="error" class="error-message">{{ error }}</div>
        <div v-if="isLoading" class="loading-message">Loading secret YAML...</div>

        <div v-if="!isLoading" class="yaml-container">
          <textarea 
            v-model="yamlContent" 
            :disabled="isSubmitting"
            class="yaml-textarea"
          ></textarea>
        </div>
      </div>

      <div class="modal-footer">
        <button 
          class="cancel-button" 
          @click="closeModal"
          :disabled="isSubmitting"
        >
          Cancel
        </button>
        <button 
          class="update-button" 
          @click="updateSecret"
          :disabled="isSubmitting || isLoading || !yamlContent.trim()"
        >
          {{ isSubmitting ? 'Updating...' : 'Update Secret' }}
        </button>
      </div>
    </div>
  </div>
</template>


<style src="@/assets/css/MenuDialog.css" scoped></style>