<script setup lang="ts">
import { ref } from "vue";
import { useMainStore } from "@/stores/main";
import { required } from "@/utils";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const valid = ref(true);
const title = ref("");
const zipFiles = ref();
const Form = ref();

const mainStore = useMainStore();

async function Submit() {
  await (Form as any).value.validate();
  if (valid.value) {
    await mainStore.uploadPlot(title.value, zipFiles.value[0]);
    (Form as any).value.reset();
  }
}
</script>

<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title primary-title>
        <h3 class="card-title mb-3">{{ t("makeVideo") }}</h3>
      </v-card-title>
      <v-card-text>
        <v-form v-model="valid" ref="Form">
          <v-text-field
            :label="$t('title')"
            v-model="title"
            :rules="required"
            prepend-icon="title"
          >
          </v-text-field>
          <v-file-input
            v-model="zipFiles"
            :rules="[(v) => v.length || 'select zip file.']"
            accept=".zip"
            :label="$t('fileInput')"
            prepend-icon="folder_zip"
          ></v-file-input>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="Submit" :disabled="!valid">
          {{ t("send") }}
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>
