<script setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { useMainStore } from "@/stores/store";
import axios from "axios";
import Footer from "../components/Footer.vue";

const { t } = useI18n();
const store = useMainStore();

// 使用者點擊分享時帶入的資訊
const shareData = {
  url: store.imgPath, // 要分享的 URL
  title: "101", // 標題
  text: "AI明信片", // 文字內容
};

console.log("shareData", shareData);
console.log("store.assignBgImgTitle", store.assignBgImgTitle);

const imageUrl = ref("");

// 儲存圖片
const downloadImage = async (url) => {
  try {
    const response = await axios({
      url: url,
      method: "GET",
      responseType: "blob",
    });

    imageUrl.value = URL.createObjectURL(new Blob([response.data]));

    saveImage();
  } catch (error) {
    console.error("Error downloading the image:", error);
  }
};

const saveImage = () => {
  const a = document.createElement("a");
  a.href = imageUrl.value;
  a.download = "101-AI-Postcard.jpg"; // 檔案名稱
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

async function share() {
  try {
    // 使用 Web Share API
    await navigator.share(shareData);
  } catch (err) {
    // 使用者拒絕分享或發生錯誤
    const { name, message } = err;
    if (name === "AbortError") {
      alert("您已取消分享此相片");
    } else {
      alert(err);
    }
  }

  // console.log("share");
  // if (navigator.share) {
  //   try {
  //     await navigator.share({
  //       title: "101",
  //       text: "AI明信片",
  //       url: store.imgPath,
  //     });
  //     console.log("分享成功");
  //   } catch (error) {
  //     console.error("分享失敗", error);
  //   }
  // } else {
  //   alert("Web Share API 不支援在此設備上運行");
  // }
}
</script>

<template>
  <div class="content main-bg">
    <v-container class="px-5 px-sm-15 d-flex flex-column align-center">
      <div id="result" class="mb-10 img-item">
        <img
          id="imageElement"
          ref="imageElement"
          class="w-100"
          :src="store.imgPath"
          alt=""
        />

        <p>{{ store.assignBgImgTitle }}</p>
        <!-- <p>{{ t(store.assignBgImg.title) }}</p> -->
      </div>

      <!-- <p
        class="text-start px-5 description"
        v-html="t(store.assignBgImg.description)"
      ></p> -->

      <!-- <button @click="share()" class="main-btn mt-15">分享相片</button> -->

      <button @click="downloadImage(store.imgPath)" class="main-btn mt-15">
        {{ t("save_photo") }}
      </button>

      <v-dialog v-if="store.assignBgImgTitle === '南投日月潭'" max-width="300">
        <template v-slot:activator="{ props: activatorProps }">
          <button v-bind="activatorProps" class="main-btn mt-7">
            {{ t("ticket_purchase") }}
          </button>
        </template>

        <template v-slot:default="{ isActive }">
          <v-card class="pa-2">
            <v-card-title class="pa-5">
              {{ t("purchase_link") }}
            </v-card-title>

            <v-card-text>
              <a
                href="https://nantou.welcometw.com/tour/kwOz"
                target="_blank"
                class="d-block mb-5"
              >
                1.【日月潭C好行款】<br />
                <small>南投日月潭來回車票(電子票證)+船+纜車+遊湖巴士</small>
              </a>

              <a href="https://nantou.welcometw.com/tour/KNez" target="_blank">
                2.【日月潭D暢遊款】<br />
                <small>南投日月潭來回車票(電子票證)+船+九族+遊湖巴士</small>
              </a>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>

              <v-btn text="Close" @click="isActive.value = false"></v-btn>
            </v-card-actions>
          </v-card>
        </template>
      </v-dialog>
    </v-container>
    <Footer url="/step6" />
  </div>
</template>

<style lang="scss" scoped>
.content {
  padding: 8rem 0 8rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .img-item {
    img {
      border: 8px solid white;
    }

    p {
      padding: 8px;
      margin-top: -5px;
      color: white;
      text-shadow: none;
      background-color: var(--main-color);
    }
  }
}

.v-card-title {
  letter-spacing: 1px;
}

a {
  color: var(--main-color);
  text-decoration: none;
}
</style>
