<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch } from "vue";

const props = defineProps({
  editData: Object,
  mode: String,
  userOption: Array,
});

const emit = defineEmits(["handle-data", "close-modal"]);

const visible = ref(true);
const fileInput = ref<HTMLInputElement | null>(null);
const form = ref({
  name: "",
  description: "",
  file: "",
});
const onChooseFile = () => {
  fileInput.value?.click();
};
const submit = () => {
  emit("handle-data", form.value);
};
function onEsc(e: KeyboardEvent) {
  if (e.key === "Escape") {
    emit("close-modal");
  }
}

onMounted(() => window.addEventListener("keydown", onEsc));
onBeforeUnmount(() => window.removeEventListener("keydown", onEsc));
</script>

<template>
  <v-card class="rounded-lg overflow-hidden">
    <!-- 타이틀 영역 -->
    <v-card-title
      class="text-white font-weight-bold text-h6"
      style="background-color: #1976d2"
    >
      Workflow Information
    </v-card-title>

    <v-card-text class="pa-6">
      <v-form @submit.prevent="submit">
        <div class="text-subtitle-1 font-weight-medium mb-4">
          Workflow Information
        </div>
        <div class="mb-5">
          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
            >Workflow Name
          </label>
          <v-text-field
            v-model="form.name"
            variant="outlined"
            dense
            hide-details
            required
          />
        </div>
        <div class="mb-5">
          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
            >Workflow Description
          </label>
          <v-text-field
            v-model="form.description"
            variant="outlined"
            dense
            hide-details
            required
          />
        </div>
        <div class="mb-5">
          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
            >Upload File
          </label>
          <v-file-input
            v-model="form.file"
            label="Upload File"
            @click:append-outer="onChooseFile"
            outlined
            dense
            hide-details
          />
        </div>
      </v-form>
    </v-card-text>

    <v-card-actions class="justify-end" style="padding: 16px 24px">
      <v-btn color="success" @click="submit">Save</v-btn>
      <v-btn text class="white--text" @click="$emit('close-modal')"
        >Close</v-btn
      >
    </v-card-actions>
  </v-card>
</template>
