<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title primary-title>
        <div class="headline primary--text">Message</div>
      </v-card-title>
      <v-card-text>
          <v-form v-model="validMsg" ref="msgForm">
            <v-text-field 
              @keyup.enter="msgSubmit" 
              label="Message" v-model="msg" 
              :rules="required"
              prepend-icon="message">
            </v-text-field>
          </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="msgSubmit" :disabled="!validMsg">
              Send
            </v-btn>
      </v-card-actions>
    </v-card>
    <v-card class="ma-3 pa-3">
      <v-card-title primary-title>
        <div class="headline primary--text">File</div>
      </v-card-title>
      <v-card-text>
          <v-form v-model="validFile" ref="fileForm">
            <v-file-input
              v-model="zipFiles"
              :rules="[v=> v.length || 'select zip file.']"
              accept=".zip"
              label="File input"
              prepend-icon="folder_zip"
            ></v-file-input>
          </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="fileSubmit" :disabled="!validFile">
              Send
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>
<script setup lang="ts">
import { ref} from 'vue';
import { required } from '@/utils';
import { useAdminStore } from '@/stores/admin';

const validMsg = ref(true);
const msg = ref('');
const msgForm = ref(null);

const validFile = ref(true);
const zipFiles = ref();
const fileForm = ref();


const adminStore = useAdminStore();

async function msgSubmit() {
  await (msgForm as any).value.validate();
  if (validMsg.value) {
    await adminStore.actionTestCeleryMsg({msg:msg.value});
    (msgForm as any).value.reset();
  }
}

async function fileSubmit() {
  await (fileForm as any).value.validate();
  if (validFile.value) {
    await adminStore.actionTestCeleryFile(zipFiles.value[0]);
    (fileForm as any).value.reset();
  }
}
</script>