<!-- CreatePodGuided.vue -->
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'CreatePodGuided',

  props: {
    show: {
      type: Boolean,
      required: true
    },
    namespace: {
      type: String,
      required: true
    }
  },

  emits: ['close', 'create-pod'],

  setup(props, { emit }) {
    const podName = ref('');
    const podImage = ref('');
    const namespace = ref('');
    const command = ref('');
    const isSubmitting = ref(false);
    const error = ref('');

    const resetForm = () => {
      podName.value = '';
      podImage.value = '';
      namespace.value = '';
      command.value = '';
      error.value = '';
      isSubmitting.value = false;
    };

    const closeModal = () => {
      resetForm();
      emit('close');
    };

    const createPod = () => {
      // Validate form
      if (!podName.value.trim()) {
        error.value = 'Pod name is required';
        return;
      }

      if (!podImage.value.trim()) {
        error.value = 'Container image is required';
        return;
      }

      if (!namespace.value.trim()) {
        error.value = 'Namespace is required';
        return;
      }

      isSubmitting.value = true;

      const container = {
        name: 'container-1',
        image: podImage.value.trim()
      }

      if (command.value.trim()) {
        // NOTE(rene): pass command as string within pod definition. This will
        // be handled by go and transformed into the []string{} which is the
        // type that corev1.Pod expects.
        container.command = command.value.trim();
      }

      let opts = {
        podDefinition: {
          apiVersion: 'v1',
          kind: 'Pod',
          metadata: {
            name: podName.value.trim(),
            namespace: namespace.value.trim()
          },
          spec: {
            containers: [container]
          }
        },
        isYaml: false
      }
      emit('create-pod', opts);

      // Reset and close form
      resetForm();
      closeModal();
    };

    return {
      podName,
      podImage,
      namespace,
      command,
      isSubmitting,
      error,
      closeModal,
      createPod
    };
  }
});
</script>

<template>
  <div v-if="show" class="modal-overlay" @click="closeModal">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h3>Create Pod</h3>
        <button class="close-button" @click="closeModal">&times;</button>
      </div>

      <div class="modal-body">
        <div v-if="error" class="error-message">{{ error }}</div>

        <div class="form-group">
          <label for="pod-name">Pod Name:</label>
          <input 
            id="pod-name" 
            v-model="podName" 
            type="text" 
            placeholder="test-pod-1"
            :disabled="isSubmitting"
          />
        </div>

        <div class="form-group">
          <label>Namespace:</label>
          <input 
            id="namespace" 
            v-model="namespace" 
            type="text" 
            placeholder="default"
            :disabled="isSubmitting"
          />
        </div>

        <div class="form-group">
          <label for="pod-image">Container Image:</label>
          <input 
            id="pod-image" 
            v-model="podImage" 
            type="text" 
            placeholder="busybox"
            :disabled="isSubmitting"
          />
        </div>

        <div class="form-group">
          <label>Container Command:</label>
          <input 
            id="command" 
            v-model="command" 
            type="text" 
            placeholder='sh -c sleep 3600'
            :disabled="isSubmitting"
          />
        </div>
      </div>


      <div class="modal-footer">
        <button 
          class="cancel-button" 
          @click="closeModal"
          :disabled="isSubmitting"
        >
          Cancel
        </button>
        <button 
          class="create-button" 
          @click="createPod"
          :disabled="isSubmitting"
        >
          {{ isSubmitting ? 'Creating...' : 'Create' }}
        </button>
      </div>
    </div>
  </div>
</template>

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