<script setup lang="ts">
import { ref, reactive, watch, computed } from "vue";
import { useMainStore } from "@/stores/main";
import { required } from "@/utils";
import { useI18n } from "vue-i18n";
import { wsUrl } from "@/env";
import type { VideoCreate, VideoUploaded, VideoContent } from "@/interfaces";
import router from "@/router";
import Dialog from "@/components/Dialog.vue";

const { t } = useI18n();
const mainStore = useMainStore();
const WS = mainStore.videosWebSocket;
const valid = ref(true);
const Form = ref();

// props
let dialog = reactive({
  msg: "",
  state: "info",
  show: false,
});

let data = reactive({
  prompt: "SDv1.5",
  model_name: "咖啡",
});

async function Submit() {
  console.log("Submit");
  console.log("data", JSON.stringify(data));

  // const response = await mainStore.uploadVideoContent(content, files);
  // console.log("response", response);
}
</script>

<template>
  <v-container fluid>
    <v-card class="mt-10 ma-3 pa-sm-5">
      <v-card-title primary-title>
        <h3 class="card-title mb-3">AI 算圖</h3>
      </v-card-title>
      <v-card-text class="mx-auto">
        <v-row>
          <v-col cols="6" class="d-flex flex-column">
            <v-form v-model="valid" ref="Form">
              <p>Model Name：</p>
              <v-chip-group v-model="data.model_name" column class="mb-3">
                <v-chip
                  filter
                  color="primary"
                  variant="outlined"
                  value="SDv1.5"
                >
                  SDv1.5
                </v-chip>
                <v-chip
                  filter
                  color="primary"
                  variant="outlined"
                  value=" SDv2.1"
                >
                  SDv2.1
                </v-chip>
              </v-chip-group>

              <v-text-field
                label="Prompt"
                v-model="data.prompt"
                :rules="required()"
              >
              </v-text-field>
            </v-form>

            <div class="mt-auto">
              <v-btn
                @click="Submit"
                variant="flat"
                color="primary"
                class="w-100"
              >
                {{ t("send") }}
              </v-btn>
            </div>
          </v-col>

          <v-col cols="6">
            <div class="img-block">
              <img src="" alt="" />
            </div>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <template>
      <div class="text-center">
        <Dialog
          :msg="dialog.msg"
          :state="dialog.state"
          :dialog="dialog.show"
          @close="dialog.show = false"
        ></Dialog>
      </div>
    </template>
  </v-container>
</template>

<style lang="scss" scoped>
.img-block {
  height: 500px;
  border-radius: 10px;
  border: 1px solid #b5b5b5;
  background-color: #f8f8f8;
}
</style>
