<script setup>
import { ref, reactive } from "vue";
import { useMainStore } from "@/stores/store";
import { useRouter } from "vue-router";
import axios from "axios";
import Footer from "../components/Footer.vue";

const router = useRouter();
const store = useMainStore();
const apiUrl = import.meta.env.VITE_API_URL;
const imgUrl = import.meta.env.VITE_API_IMG_URL;

console.log("Step4 store.assignBgImg", store.assignBgImg);

let fileInput = ref(null);
let imgFile = ref(null);

// 選擇檔案
function onFileChange() {
  console.log("fileInput", fileInput.value);
  if (fileInput.value.files.length) {
    imgFile.value = fileInput.value.files[0];
  }
  console.log("imgFile.value", imgFile.value);
}

let imgLoading = ref(false);

// 算圖欄位
let runParameters = reactive({
  seed: "54987890",
  denoising_strength: "0.35",
  batch_size: "1",
  n_iter: "30",
});

// 算圖
async function upload() {
  console.log("upload");
  if (!imgFile.value) {
    return;
  }

  store.imgPath = "";
  imgLoading.value = true;
  console.log("store styleNum >>>", store.styleNum);

  let url = `${apiUrl}/sd/run?seed=${runParameters.seed}&denoising_strength=${runParameters.denoising_strength}&batch_size=${runParameters.batch_size}&n_iter=${runParameters.n_iter}&style_num=${store.styleNum}`;

  // 人物圖
  const formData = new FormData();
  formData.append("file", imgFile.value);

  try {
    let response = await axios.post(url, formData);
    console.log("runImg", response);

    if (response.status === 200) {
      store.imgPath = response.data[0].path;
      imgLoading.value = false;
      console.log("store.imgPath", store.imgPath);

      router.push("/step5");
    }
  } catch (error) {
    console.log("error", error);
  }
}
</script>

<template>
  <div class="content main-bg">
    <v-container class="px-5 px-sm-15">
      <div
        v-if="imgLoading"
        class="d-flex flex-column align-center justify-center"
      >
        <p class="mb-15">
          明信片製作中… <br />
          請稍等約 30 秒
        </p>

        <v-progress-circular
          :size="70"
          :width="7"
          color="white"
          indeterminate
        ></v-progress-circular>
      </div>

      <div v-else>
        <p class="title mb-5">請上傳您的相片</p>

        <v-file-input
          ref="fileInput"
          v-on:change="onFileChange()"
          label="選擇檔案"
          prepend-icon="mdi-camera"
          variant="filled"
          class="text-white mb-15"
        ></v-file-input>
      </div>

      <!-- <router-link to="/step5" class="main-btn">確定</router-link> -->

      <div class="btn-content">
        <router-link to="/step5" class="main-btn">重新上傳</router-link>
        <button @click="upload()" class="main-btn">確定</button>
      </div>
    </v-container>

    <Footer url="/step3" />
  </div>
</template>

<style lang="scss" scoped>
.mdi-camera::before {
  color: #fff !important;
}

.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btn-content {
  width: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  position: absolute;
  left: 50%;
  bottom: 20vw;
  transform: translate(-50%, 0);

  .main-btn {
    margin: 10px;
  }
}
</style>
